Question

I am using jqGrid with treeGrid. I have added a filterToolbar. I would like to search locally instead of having a server call. The treegrid docs say that, “When we initialize the grid and the data is read, the datatype is automatically set to local.” (This is regards to TreeGrid)

So, is it possible to implement local search with treeGrid. I tried the below configuration, but it is resulting in server calls.

My Configuration is

var grid = $("#grid").jqGrid({
    treeGrid: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'businessAreaName',
    ExpandColClick : true,
    url:'agileProgramme/records.do',
    datatype: 'json',
    mtype: 'GET',
    colNames:['Id'
              , 'Business Area'
              , 'Investment'
              , 'Org'
              , 'Goal'
    ],
    colModel:[
/*00*/          {name:'agileProgrammeId',index:'agileProgrammeId', width:0, editable:false,hidden:true},
/*01*/          {name:'businessAreaName',index:'businessAreaName', width:160, editable:false},
/*02*/          {name:'programmeName',index:'programmeName', width:150, editable:false, classes:'link'},
/*03*/          {name:'org',index:'org', width:50, editable:false, classes:'orgHierarchy', sortable : false},
/*04*/          {name:'goal',index:'goal', width:70, editable:false}
    ],
    treeReader : {
        level_field: "level",
        parent_id_field: "parent", 
        leaf_field: "leaf",
        expanded_field: "expanded"
    },
    autowidth: true,
    height: 240,
    pager: '#pager',
    sortname: 'id',
    sortorder: "asc",
    toolbar:[true,"top"],
    caption:"TableGridDemo",
    emptyrecords: "Empty records",
    jsonReader : {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        cell: "cell",
        id: "agileProgrammeId"
    }
});   

And to implement the search toolbar

$('#grid').jqGrid('filterToolbar', {stringResult: true,searchOnEnter : true});

Would appreciate any help or any pointer on even if it is possible?

Answer 1

The most problem in the TreeGrid filtering is that it’s not clear what should be displayed in the TreeGrid as the result of applying the filter. The standard behavior of applying filter to the grid consist from removing all non-filtered rows. Such behavior will be wrong in case of TreeGrid. In the answer to the close question I tried to explain the problem.

What one can try to implement is some kind of highlighting of the filtered rows only (see here as an idea) or one can set some CSS class to the non-filtered rows to make there gray (like disabled). In any way one have to display parents of the filtered rows in some way. One more option will be to display the filtered TreeGrid not in the Tree form. On can display for example an additional column with the path to the filtered row and the rest row data.

UPDATED: What I mean with “to display parents of the filtered rows” is about the following. Let us we have the TreeGrid like the following

+root             123
    +testchild1    32
        test1       4
    +child2        30
        test2       7

and we filter for the first column for the text “test”. In the case it would be wrong to display just the lines which has the text “test”

    +testchild1    32
        test1       4
        test2       7

but in some scenarios if would be enough to display the above lines with the full path till the root element:

root\testchild1          32
root\testchild1\test1     4
root\testchild1\test2     7

In the case the information will be displayed in the grid instead of TreeGrid.

In other cases the searching in the leafs only can have sense. In the case one could really display the results in the TreeGrid form, but it will be not the common case.