jqGrid auto filter highlighting search result

Question

I want help in highlighting jqgrid row's data part as and when they are matched.

My jqGrid markup:

<div title="Environment variables">
    <div class="jqUIDiv">
        <table id="tblEnvvars" width="100%"></table>
        <div id="EnvvarsGridpager"></div>
    </div>
</div>'

And my jqGrid code:

var envVars=[]; //xml is a xml response sent from server
$(xml).children('product').each(function(){ 
    $(this).children('envvars').each(function(){ 
        $(this).children('variable').each(function(){ 
            var row={};
            isPresent=true;
            row.name=$(this).attr('name');
            row.value=$(this).attr('value');
            envVars.push(row);
        });
    });
});

jQuery("#tblEnvvars").jqGrid({
        datatype: "local",    
        data: envVars,
        colNames:['Name','Value'],
        colModel:[
            {name:'name',index:'name', align:"left"},   
            {name:'value',index:'value', align:"left"}

        ],
        pager : '#EnvvarsGridpager',
        rowNum:10,
        rowList:[10,50,100],
        scrollOffset:0,
        height: 'auto',
        autowidth:true,
        viewrecords: true,
        gridview: true

    });

    jQuery("#tblEnvvars").setGridParam({rowNum:10}).trigger("reloadGrid");
    jQuery("#tblEnvvars").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

for example:

if a row item contains LD_LIBRARY_PATH and user types in LIB in search area, then LIB in LD_LIBRARY_PATH should get highlighted.

Update: 15/12/2011

I found this Highlight plugin to highlight but need help in applying it.

I used it to create the below screenshot

Here is the code i used

jQuery("#list1").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn', afterSearch:highlightIt()});

function highlightIt()
{
$('#list1 > tbody > tr > td').highlight('HOST');
}

Oscoumbrian

What you mean under the "highlighting" of the row? If you select a row of the grid the row will be highlighted by adding the class "ui-state-highlight" to the row. Is this what you want to have for many rows of the grid? – Petcock

@Petcock - I think he wants to highlight text portions of data in the rows, when text is typed into a search box. – Eikon

@Abhishek - Have you taken a look at the filterToolbar docs trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching - it looks like beforeSearch might be a good event to hook in your highlight plugin. – Eikon

@Justin Ethier: Yes, i want to highlight text portions of data in a row, which matches the search text – Oscoumbrian

Answer 1

Look at the demo from the answer. If you would use beforeSearch (see suggestion from the Justin Ethier comment) you can easy modify the demo to use filterToolbar.

UPDATED: After rereading of your question carefully one more time I fond your idea to highlight the search patterns very interesting. So I created the demo which demonstrate how to implement your requirement. I used the options

loadonce: true,
ignoreCase: true

to make case insensitive local filtering of the data. If you use already local data types (any datatypes excepring 'xml' and 'json') the data will be already hold locally and you don't need to add additional loadonce: true option.

Typing in the searching filter above the grid search patterns the data will be not only filtered by the patterns but the pattern part of very cell in the column will be highlighted which improves the visibility. So you can see the results like on the following picture:

Now about the implementation. First of all I use the Highlight plugin which you found, but I changed the line

spannode.className = 'highlight';

to

spannode.className = 'ui-state-highlight';

to be more compatible to jQuery UI CSS.

I don't use any callback function of the filterToolbar because all the callbacks will be called before the new grid body will be filled. The filterToolbar fill filters part of the postData, set the search parameter of jqGrid to true and trigger reloadGrid. So one should highlight the data inside of loadComplete (or gridComplete) callback because at the moment all data which should be highlighted are in the grid. So I used filterToolbar in the simple form

$("#list1").jqGrid('filterToolbar',
    {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

The implementation of loadComplete you find below:

loadComplete: function () {
    var filters, i, l, rules, rule, iCol, $this = $(this);
    if (this.p.search === true) {
        filters = $.parseJSON(this.p.postData.filters);
        if (filters !== null && typeof filters.rules !== 'undefined' &&
                filters.rules.length > 0) {
            rules = filters.rules;
            l = rules.length;
            for (i = 0; i < l; i++) {
                rule = rules[i];
                iCol = getColumnIndexByName($this, rule.field);
                if (iCol >=0) {
                    $('>tbody>tr.jqgrow>td:nth-child(' + (iCol + 1) +
                        ')', this).highlight(rule.data);
                }
            }
        }
    }
}

Petcock

Oleg: I want to highlight text portions of the data in a row as and when search string is typed (live).. eg: if i give search string as LIB it should highlight all the text LIB in that column, that contains LIB in it. Also as an example you can try this page to see what i mean.. (though this page highlights only after one clicks, I need, as and when user enters a key in the search string) – Oscoumbrian

Any ideas? I tried beforeSearch but i think in my case it should be afterSearch since while typing it should highlight the text portion in the datagrid, but afterSearch is triggered as soon as the grid is created, I am not able to understand. Please help in your free time. Thanks – Oscoumbrian

1 very urgent request, I came to know about this problem today itself, Check your example when there are a lot of rows in jqgrid and I expand the view from 10 to 50 and when I try to select 10th or 11th row, it does not respond, it happens the same way in my jqgrid too. Can you try clicking on the row which has name asd & IIR Windows? Try checking it in IE8 when I select 11th row it selects 10th row – Oscoumbrian

@AbhishekSimon: The reason seems for me easy: both 10th and 11th rows "IIR Windows" and "asd" has the same id=10. It's error in the data (in AbhishekSimon11.xml). You should just use unique ids only. – Petcock

It looks like onSelectRow the id's are somehow same, which is causing the problem. What is going wrong here, can you please help? – Oscoumbrian

The Id's for IIRWindows & asd is 702 & 687 which is getting assigned from cfgId which is different – Oscoumbrian

@AbhishekSimon: It's not id duplicates in the data. The data has no ids at all. It's the main reason. The id duplicates are from the old bug in jqGrid. I'll try whether it's still exsit. – Petcock

I remember you told me to have unique id's for each row, so I created a node cfgId having unique nos. database sequence and I assigned it to cfgId colModel does jqgrid explicitly needs to have id as colModel? – Oscoumbrian

You can fix the problem by adding id: "cfgId" as additional property of jsonReader. Try with the demo. If you would use more recent jqGrid like 4.3.3 which I used in the last demo the problem will not exist too. – Petcock

Thanks Oleg, i'll try that 1st thing in morning tomorrow :) – Oscoumbrian

Hello gentlemen, thanks for your question & answer, which I voted up. Are you able to understand how to implement this in JqGrid for PHP ? I unsuccessfully tried to do it. my question explains in details what I did. – Wilie