Hi Team,
I have a requirement for a searchable or typeahead feature for WebDataTree, is it possible to achieve that via infragistics?
Could you share the code as well. Need to get something like below
Regards
Abraham
Hello Abraham,
Thank you for contacting the Infragistics support!
I am providing a simple example on how you may implement search functionality with the WebDataTree. In the attached sample we search by text, but you may as well search by value or key. In this example we get the address of the node that matches our search criteria.
However, hiding the nodes that do not meet the search criteria is not supported out of the box by the control and would require custom implementation. What the behavior that the attached screenshot demonstrates is more like Filtering feature.
You may refer to this thread where similar scenario is discussed - https://www.infragistics.com/community/forums/f/ultimate-ui-for-asp-net/96408/webdatatree----any-way-to-filter-nodes
Thank you once more for using Infragistics ASP.NET!
Best regards,
Alexander Marinov
WebSite90.zip
Hi Alex,
Thanks for the response. This logic you given will fetch the address index. To the minimum when I type my search keyword and click search button or on key event , cursor should highlight the node, is that possible to achieve?
Thank you for your response!
I am attaching an updated sample that demonstrates how you may highlight a node when it matches a search term. You may achieve similar behavior if you use the KeyUp client event.
Please let me know if you have any additional questions!
Best regards,Alexander
WebSite90_Updated.zip
Highlighted Node is perfect solution . But we have a completed Node structure , with this I am not able to accomplish as per your sample code.
please find my sample node
<ignav:WebDataTree ID="WebDataTree1" runat="server" Height="300px" Width="200px">
<Nodes>
<ignav:DataTreeNode Text="WorkFlow And Imaging">
<ignav:DataTreeNode Text="Domains">
<ignav:DataTreeNode Text="DOM1">
<ignav:DataTreeNode Text="Servers">
</ignav:DataTreeNode>
<ignav:DataTreeNode Text="Forms">
<ignav:DataTreeNode Text="Classes">
<ignav:DataTreeNode Text="Queries">
<ignav:DataTreeNode Text="Imports">
<ignav:DataTreeNode Text="Roles">
<ignav:DataTreeNode Text="Users">
<ignav:DataTreeNode Text="Groups">
<ignav:DataTreeNode Text="Routes">
<ignav:DataTreeNode Text="WS QueryTypes">
</Nodes>
<ignav:DataTreeNode Text="DOM2">
</ignav:WebDataTree>
and also hiding the nodes that do not meet the search criteria is a mandate requirement for us , hence I would like know more about that also. As you it is could be done via custom script. because of this feature limitation I do not want to shift to another UI control.
RegardsAbraham
I have updated the sample to demonstrate how you may search through all the tree nodes.
Also, I have provided an example on how you may hide the nodes that do not match the search clause. In addition, you may expand all nodes after this "filtering" is executed to show the users if there are filtered child nodes.
Have in mind that such functionality goes beyond the scope of the control and such implementation may lead to unexpected behaviors. However, if you think this is suitable for your scenario - you may work in this direction - hiding and showing the nodes depending on their text. Of course, you may also hide/show the expand buttons, for example.
What I would suggest is to create a product idea about Filtering feature in the WebDataTree control - https://www.infragistics.com/community/ideas/i/ultimate-ui-for-asp-net
Thank you once more for using Infragistics for ASP.NET!
Alexander
4162.WebSite90.zip
Thanks for the response, I will try to integrate it and let you know. I will add this to product idea feature for sure.
Yes we are nearing to the requirement. In last code snippet scenario , it is very difficult to know which node I am in ,because of non availability of names . We require something like below. If we are not able to highlight also fine , but it should list the search node and display its parents predecessor node also
I have made an entry to product feature Idea list. But if you can help me to achieve the above requirement prior to product feature integration it would be more use for me.
Thank you for logging the product idea.
About current options for implementing such filtering - as I have said - this would require a custom implementation and it would be up to you to decide how to tackle this scenario. What I may suggest is, for example, getting all the parents of the node that meets the requirement (in this case using jQuery):
$(node).closest("#WebDataTree1").find("a.igdt_NodeParent")
Then you would be able to iterate through the parent nodes and to set their display property the same way you have done for the node.
However, you may choose the approach that suits your project best.
Best regardsmAlexander