JQgrid - Populate select filter toolbar search using xml datatype

Question

I have JqGrid of type tree grid and I'm trying to populate select search in filter toolbar base the data from the server (the data that returned in XML format). I found the functions that get unique values from specific rows and than build the string in the correct format (for example: ":All;1:1;2:2;3:3").

one of my grid option is loadonce:true , and what i understood from documentation is that if this option is set to true and i get the data from the server in XML or JSON format it change the datatype property to local automatically and all the changes that i want to perform is on the client side code.

here is what i was trying to do:

<script>                        
    $(document).ready(function () {
        jQuery("#treegrid").jqGrid({
            treeGrid: true,
            treeGridModel: 'adjacency',
            ExpandColumn: 'name',
            direction: 'rtl',
            url: 'Handlers/JQTreeGridDataHandler.ashx',// from here i'm getting the XML data from server and it works fine
            datatype: "xml",                                
            mtype: "POST",
            colNames: ["id", "Account", "Acc Num", "Debit", "Credit", "Balance"],
            colModel: [
                { name: 'id', index: 'id', width: 1, hidden: true, key: true },
                { name: 'name', index: 'name', width: 180 },// this is the col that i want to add the select filter
                { name: 'num', index: 'acc_num', width: 80, align: "center", search: false },
                { name: 'debit', index: 'debit', width: 80, align: "right", search: false },
                { name: 'credit', index: 'credit', width: 80, align: "right", search: false },
                { name: 'balance', index: 'balance', width: 80, align: "right", search: false }
            ]
            height: 'auto',
            sortname: 'name',
            sortorder: 'asc',
            loadonce: true,
            viewrecords: true,
            pager: "#ptreegrid",
            caption: "Treegrid example"
        });


        setSearchSelect.call($("#treegrid"), "name");                            

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

    });

    //Functions for Toolbar searching
    var getUniqueNames = function (columnName) {
        var t = $("#treegrid").jqGrid('getGridParam', 'data'),
            texts = $.map(t, function (item) { return item.name; }), uniqueTexts = [],
            textsLength = texts.length, text, textsMap = {}, i;
        for (i = 0; i < textsLength; i++) {
            text = texts[i] 
            if (text !== undefined && textsMap[text] === undefined) {
                // to test whether the texts is unique we place it in the map.
                textsMap[text] = true;
                uniqueTexts.push(text);
            }
        }
        return uniqueTexts;
    },
        buildSearchSelect = function (uniqueNames) {
            var values = ":All;";
            $.each(uniqueNames, function () {
                values += this + ":" + this + ";";
            });

            return values.slice(0, -1);
        },
        setSearchSelect = function (columnName) {
            $("#treegrid").jqGrid('setColProp', columnName,
                {
                    stype: "select",
                    searchoptions: {
                        sopt: ['eq'],
                        value: buildSearchSelect(getUniqueNames.call($("#treegrid"), columnName))                                            
                    }
                });
        };
</script>

please help me to understand what I'm doing wrong. Thanks a lot

Answer 1

The problem you describe is due to the ajax call. To explain: You grid is created according to the grid options. And ajax call is made for the data. The data comes with delay according to your server response, amount of dat requested, network connections and etc. Untill the data com to the grid you call a finction to build a select based on the data, but the data is not present at the grid. To solve the proble you have two options

1.Use setTimeout to delay the creation of the select and serch like

...
setTimeout(function() {
    setSearchSelect.call($("#treegrid"), "name");                            
    $("#treegrid").jqGrid('filterToolbar', { stringResult: true, defaultSearch: "cn" });
}, 800);
...

2.The second recommended way is to call these once when tha data is loaded. This can be accomplished in gridComplete event and a flag indicationg is the select is build. Below the code:

    var buildselect = false;
    jQuery("#treegrid").jqGrid({ 
        url: 'data.xml', 
        treedatatype: "xml", 
        mtype: "POST", 
        colNames:["id","Account","Acc Num", "Debit", "Credit","Balance","Enabled"], 
        colModel:[ 
            {name:'id',index:'id', width:1,hidden:true,key:true}, 
            {name:'name',index:'name', width:180 }, 
            {name:'num',index:'acc_num', width:80, align:"center", search: false}, 
            {name:'debit',index:'debit', width:80, align:"right", search: false}, 
            {name:'credit',index:'credit', width:80,align:"right", search: false}, 
            {name:'balance',index:'balance', width:80,align:"right", search: false}, 
            {name:'enbl', index:'enbl', hidden: true} 
        ], 
        height:'auto', 
        pager : "#ptreegrid", 
        treeGrid: true, 
        loadonce : true,
        ExpandColumn : 'name', 
        caption: "Treegrid example",
        gridComplete : function() {
            if(!buildselect) {
                setSearchSelect.call($("#treegrid"), "name");                            
                $("#treegrid").jqGrid('filterToolbar', { stringResult: true, defaultSearch: "cn" });
                buildselect = true;
            }
        }
    });

Here is a working demo of your code