How to highlight items find by the filter

8 posts, 0 answers
  1. Gers
    Gers avatar
    10 posts
    Member since:
    Jan 2016

    Posted 12 Feb 2016 Link to this post

    Is there a way to highlight items find by the filter in a treeList ?

     I Want this behavior:  http://jsfiddle.net/fosxumcb/  but using kendo provided  filter

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 16 Feb 2016 Link to this post

    Hello Gers,

     

    The widget which you are referring is not a TreeList, but a TreeView.

     

    The widget doesn't have such functionality. There is also a JavaScript error when you try to search in the example which is due to this line `$(treeViewId + ' li.k-item').expand(".k-item");`.  You are calling expand to jQuery object rather than to the TreeView instance.

     

    The following article shows how to use expand method correctly.

     

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Gers
    Gers avatar
    10 posts
    Member since:
    Jan 2016

    Posted 16 Feb 2016 in reply to Nikolay Rusev Link to this post

    I know it's a treeView but In my case i'm using a treeList. I just want the same behavior but using a treeList. I just want to know if there is a way to highlight the item found by the treelist filter.
  4. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 18 Feb 2016 Link to this post

    Hello Gers,

     

    `I just want to know if there is a way to highlight the item found by the treelist filter` - No, there isn't built-in way to highlight items based on filters.

     

    Regards,
    Nikolay Rusev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Hayden
    Hayden avatar
    2 posts
    Member since:
    Feb 2018

    Posted 19 Apr 2018 in reply to Nikolay Rusev Link to this post

    Hi Nikolay,

    Has there been any updates regarding highlighting or showing the filtered item in an Angularjs TreeList child element?

     

    Thanks,
    Hayden

     

  6. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 23 Apr 2018 Link to this post

    Hello, Hayden,

    This is still not supported out of the box, but it could be implemented using custom logic. It will require locating the searched elements using the dataItem and then apply a custom class to them.

    I made an example demonstrating an approach which could be used:

    https://dojo.telerik.com/IBAKaGaC
     
    Please have in mind that depending on the real application this could need further modifications.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Hayden
    Hayden avatar
    2 posts
    Member since:
    Feb 2018

    Posted 23 Apr 2018 in reply to Stefan Link to this post

    Hello Stephan,

    Thanks for the reply and the example. I have a few more questions based on your response:

    1. Is it possible (with custom logic) to expand rows to show a sub row that was matched by a search (e.g. in your example if the rows were not expanded by default and the user typed "Weber" in the search could the two rows about the "Buffy Weber" row expand to show the match?

    2. Would these TreeList component customizations be possible on the Angularjs version of this component too (the example is in jquery).

     

    Thanks for the help,

    Hayden

  8. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 24 Apr 2018 Link to this post

    Hello, Hayden,

    Regarding the questions:

    1) Currently, there is no straightforward approach to do this as if we search in the data we have no information if this data is visible or not. Also, even if we find the item and locate that is not visible, it could be nested in N-levels and we may need to go up recursively to check to which level the nodes are expanded and which levels have to be expanded.

    2) These customizations are possible when using the AngularJS(not Angular 2+) version of the widgets as the Directives are wrappers over the jQuery widgets and the rendering and the functionalities are the same.

    If you need further assistance with the searching functionality, I can recommend our Professional Services team which will be able to provide a solution that will be custom made for the real application covering the specific scenarios and requirements:

    https://www.progress.com/services/outsourcing/feature-customization

    Let me know if you need additional details on this matter.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top