highlight keyword using in external filter for kendoUI grid

2 posts, 0 answers
  1. 영헌
    영헌 avatar
    2 posts
    Member since:
    Mar 2017

    Posted 06 Apr 2017 Link to this post

    I used kendoui Grid and external filter using input box for search keyword.

    I want to apply some style(ex. color: blue) to keywords in cells of kendoUI grid filtered by keyword in input box.

        var q = iptManagerSearch.val(); // keyword value by user input
        var grid = gridManagerUI.data("kendoGrid");
        grid.dataSource.filter({
            // page: 1,
            // pageSize: 20,
            logic: "or",
            filters: [ // fields to be applied keyword from users input
                {field:"ums_groups_name", operator:"contains", value:q},
                {field:"name", operator:"contains", value:q},
                {field:"id", operator:"contains", value:q},
                {field:"organization", operator:"contains", value:q},
                {field:"position", operator:"contains", value:q},
                {field:"responsibility", operator:"contains", value:q},
                {field:"mobilePhoneNumber", operator:"contains", value:q},
                {field:"lastLogin", operator:"contains", value:q},
                {field:"lastEntry", operator:"contains", value:q}
            ]
        });

     

    I did filter my grid by user's input.

    after that I want to make all keywords( that matched with user's input keyword ) in each cell has 'color: blue'

     

    How can I access style of keywords  in cells of filtered grid. In case of my code, value is 'q'.

     

    Thanks

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2469 posts

    Posted 10 Apr 2017 Link to this post

    Hello,

    In order to implement the behavior you can specify a template for the Grid column and add conditional logic to it. In the condition you can check the value of the field and apply a custom CSS class if necessary. 

    If you would like additional information on using templates in the Grid component you would find the following article interesting.


    For an example that illustrates the approach please refer to the dojo below:


    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 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