CODEWITHSUNDEEP
jqueryhtmlkendo-uikendo-grid
Sharon
Sharon

Reputation: 767

Search and highlight the search string in kendo grid

My requirement is to search a kendo grid and highlight all the occurrence of the search string in yellow color in some specific columns in the grid. How can i done this without any other jquery plugins. I'm thinking like I have to find the table where the data displayed in grid and get the table by some class name and iterate the tr>td and get HTML and replace the text.

I have done this, 'English_Description_LongDesc' is the field name of my grid

var value = searchText;
var grid = $('#myKendoGrid').data('kendoGrid');
var columnFullText = "";
for (var index = 0; index < grid._data.length; index++) {

 columnFullText = grid._data[index]['English_Description_LongDesc'];
   //case-insensitive search
    if (columnFullText.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
       //Here I want to get the 'English_Description_LongDesc' cell HTML and highlight the search string 
   }
}

My thinking goes like I have to get the data from kendo grid and get the corresponding column data and search in the data and if a match then get the HTML and replace the column HTML.

Is this the right approach? Is there any better way to do this? I'm very much new to kendo controls.

As per Gene R solution. I am doing like this

var value = searchText;
var grid = $("#myKendoGrid").data('kendoGrid');   
var regex = new RegExp(value,"gi");
var colIndex = grid.thead.find("th[data-field='English_Description_LongDesc']").index();
var td = $(this).find('td:eq(' + colIndex + ')');
var item = grid.dataItem(this);
if (item.English_Description_LongDesc.indexOf(value) > -1) {
    td.html(item.English_Description_LongDesc.replace(regex, function (t) { return '<span class="highlight">' + t + '</span>'; }));
    }

But there is one issue with this. It become case sensitive highlight. If i search 'Apple' in the string 'APPLE TREE' it wont highlight. Any Ideas.

Its working fine. changed if (item.English_Description_LongDesc.indexOf(value) > -1) { to if (item.English_Description_LongDesc.toLowerCase().indexOf(value.toLowerCase()) > -1) {

MORE REQUIREMENT

Can we highlight all the search term given as input in a comma separated format using the same regex? Eg: search input is 'apple,Orange,GRAPES'. We have to highlight apple or Orange or GRAPES in the grid. I never understand the regex expressions. Its so hard for me..

UPDATE - Done comma separated search Here is my final code

var grid = $("#myKendoGrid").data('kendoGrid');   
var searchParts = searchText.split(",");
var regex = new RegExp(searchParts.join("|"), "gi");

grid.tbody.find('tr[data-uid]').each(function () {
     var colIndex = grid.thead.find("th[data-field='English_Description_LongDesc']").index();
     var td = $(this).find('td:eq(' + colIndex + ')');
     var item = grid.dataItem(this);
     if (regex.test(item.English_Description_LongDesc)) {
        td.html(item.English_Description_LongDesc.replace(regex, function (t) {
        return '<span class="highlight">' + t + '</span>';
        }));
     }

Upvotes: 1

Views: 2481

Answers (1)

Gene R
Gene R

Reputation: 3744

var value = searchText;
var grid = $("#myKendoGrid").data('kendoGrid');
var colIndex = grid.thead.find("th[data-field='English_Description_LongDesc']").index();   
var regex = new RegExp(value,"gi");

grid.tbody.find('tr[data-uid]').each(function(){
    var td = $(this).find('td:eq('+colIndex+')');
    var item = grid.dataItem(this);
    td.html(item.English_Description_LongDesc.replace(regex, '<span style="background-color:yellow">'+value+'</span>'));
});

Update: case insensitive highlight

here is working example: http://dojo.telerik.com/OraVA

Update 2: use this way if do not want to replace with value:

td.html(item.English_Description_LongDesc.replace(regex, function(t){
    return '<span style="background-color:yellow">'+t+'</span>';
}));

example: http://dojo.telerik.com/OraVA/5

Upvotes: 3

Related Questions