This is a migrated thread and some comments may be shown as answers.

highlight keyword using in external filter for kendoUI grid

1 Answer 200 Views
Grid
This is a migrated thread and some comments may be shown as answers.
영헌
Top achievements
Rank 1
영헌 asked on 06 Apr 2017, 03:41 PM

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

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 10 Apr 2017, 12:02 PM
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.
Tags
Grid
Asked by
영헌
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or