0

I am using JQGrid. I have placed the text input box outside the grid structure and filtered the grid-data successfully. Now I want to know about how to highlight the texts on searched data using the text-box outside the JQGrid.

My code is here:

$(document).ready(function () {

    $("#Search_ServiceOrdNum").keypress(function (event) {
        var keycode = event.keyCode ? event.keyCode : event.which ;
        if (keycode == '13') {
            globalSearchFn();
        }
    });
});

function globalSearchFn() {

    var $grid = $("#Drilldown");
    var rules = [], i, cm, postData = $grid.jqGrid("getGridParam", "postData"),
        colModel = $grid.jqGrid("getGridParam", "colModel"),
        searchText = $("#Search_ServiceOrdNum").val(),
        l = colModel.length;
    for (i = 0; i < l; i++) {
        cm = colModel[i];
        if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
            rules.push({
                field: cm.name,
                op: "cn",
                data: searchText
            });
        }
    }

    highlightFilteredData = function () {
        var $self = $(this), filters, i, l, rules, rule, iCol,
            isFiltered = $self.jqGrid("getGridParam", "search"),
            postData = $self.jqGrid("getGridParam", "postData"),
            colModel = $self.jqGrid("getGridParam", "colModel"),
            colIndexByName = {};

        // validate whether we have input for highlighting
        if (!isFiltered || typeof postData !== "object") {
            return;
        }
        filters = $.parseJSON(postData.filters);
        if (filters == null || filters.rules == null && filters.rules.length <= 0) {
            return;
        }

        // fill colIndexByName which get easy column index by the column name
        for (i = 0, l = colModel.length; i < l; i++) {
            colIndexByName[colModel[i].name] = i;
        }

        rules = filters.rules;
        for (i = 0, l = rules.length; i < l; i++) {
            rule = rules[i];
            iCol = colIndexByName[rule.field];
            if (iCol !== undefined) {
                $("table#Drilldown > tbody > tr > td").highlight('assign');
                $self.find("table#Drilldown >tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")").highlight(rule.data);
            }
        }
    };
   
    postData.filters = JSON.stringify({
        groupOp: "OR",
        rules: rules
    });
    $grid.jqGrid("setGridParam", { search: true });
    $grid.trigger("reloadGrid", [{ page: 1, current: true }]);
    return false;
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
  • Look at [the old answer](http://stackoverflow.com/a/22717875/315935). Probably, it's very close to what you need. – Oleg Mar 13 '17 at 20:06
  • But it didnot give the answer in Detail Ok . I can't understood it – Fahim Ashar Mar 14 '17 at 12:29
  • Also the highlight function is not working – Fahim Ashar Mar 14 '17 at 12:29
  • What is not working? Is [the old demo](http://www.ok-soft-gmbh.com/jqGrid/OneFieldSearching2.htm) working on your computer? The demo uses simple `highlight` function from [here](http://www.ok-soft-gmbh.com/jqGrid/jquery.highlight-4.js), which you can load from [here](http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html) (see [here](http://johannburkard.de/resources/Johann/jquery.highlight-5.js)) – Oleg Mar 14 '17 at 12:35
  • Highlight is not working but it doen't shows any error even [ .highlight('') ] this function doenot says any error .Kindly help me please.. – Fahim Ashar Mar 14 '17 at 16:01
  • I repeat my question: what is not working? Is [the demo](http://www.ok-soft-gmbh.com/jqGrid/OneFieldSearching2.htm) not working or *your demo, which url/code you not sent, is not working*? If something is "not working", then you should describe *what* is not working? Which error you get? and so on.. – Oleg Mar 14 '17 at 16:04

0 Answers0