highlight keyword using in external filter for kendoUI grid

[영헌]

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

[Viktor Tachev]

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.

• http://docs.telerik.com/kendo-ui/framework/templates/overview

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

• http://dojo.telerik.com/onASe

Regards,
Viktor Tachev
Telerik by Progress