I am using a dataTreeNode objcet for a hierarchy of nodes on a web page. The entire div on the web page however is unelectable.
How can I make the entire object selectable? (.Selected = True doesn't work either)
Hello Matthew,
I’ve investigated your request and was able to determine that in order to achieve the desired behavior, the “SelectionType” property could be used and should be set to either “Single” or “Multiple”. The default, “SelectionType” property is set to “None”.
Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Aleksandar Atanasov,
Infragistics.
I have investigated further and found that the DataTreeNode class does not have a 'SelectionType' property, only 'Selected' property which when set to true is supposed to automatically select the node. However even when that is set to true, the node is not selected.
The “SelectionType” property should be added to the WebDataTree element in order for the WebDataTree to allow selection. Additionally, a DataTreeNode could be selected by default by adding the “Selected” property. This could look as follows:
<ig:WebDataTree SelectionType="Single" ID="WebDataTree1" runat="server" Height="300px" Width="200px">
<Nodes>
<ig:DataTreeNode Selected="true" Text="Continents" Value="CONTINENTS">
</Nodes>
</ig:WebDataTree>
I can only select the items if I start to press and drag from outside the div.
If this is how it works, is there a way where if a leaf node is clicked, some text is copied to the clipboard? because I have tried setting a cssClass for the node and then using JQuery and an onClick method but it seems that the cssClass does not give a class name to the div of the node.
If “Selected=true” is set on a node and the WebDataTree should be expanded to reach a child node, the “Expanded=true” property could be set on all the parent nodes of the selected one. Additionally, in order to change the css styling of the selected nodes the ”igdt_NodeSelected” class can be used.
Furthermore, what I could suggest for copying the text value of a node to the clipboard is using the “ClientEvents-Initialize” event and the “ClientEvents-SelectionChanged” event, which is emitted when the user selects a node. Methods could be bound to these events where the WebDataTree is accessed and the content of the selected node is copied (“ui” is the WebDataTree): navigator.clipboard.writeText(ui.get_selectedNodes()[0].get_text())
Additionally, if this is not an accurate demonstration of what you are trying to achieve, could you please share more details regarding your scenario.
Just figured out how to copy the text. Thanks for the Help!One final question, is it possible to change the text of the node from javascript so that when the user clicks the node, the text changes.
Thanks!
I’m glad that my suggestions were helpful. Additionally, regarding your last question, setting a new text value of the node when the user selects it can be achieved once again by binding a function to the NodeClick or SelectionChanged events. In this function, the set_text method could be used:
ui.get_selectedNodes()[0].set_text("new text value")
I am glad to hear that the suggestions were helpful, and you were able to achieve your requirement.
Thank you for using Infragistics components.
Thanks a lot it worked!