CODEWITHSUNDEEP
jqueryjqgrid
sgkdnay
sgkdnay

Reputation: 327

jqGrid Custom Search Template

Using jqGrid 5.1.1

I'm attempting to use custom search filer to display in what I "request" in gTmpl, but it doesn't show me anything but default ones.

my gTmpl will always be different based on the GRID for certain data to be pulled, so this is one of few examples:

$.extend($.jgrid.defaults,{
    datatype:'json',jsonReader:{repeatitems:false},loadonce:true,jqModal:false,
    viewrecords:true,altRows:true,hoverrows:false,hidegrid:false,
    rowNum:500,rowList:[100,250,500,1000,2000,3000],autowidth:true,pager:'#InfViewP',
    recordtext:'{0}/{2} Rec',emptyrecords:'No Rec Found',loadtext:'Loading...'
});

var gTmpl = {groupOp:'OR',rules:[{'field':'userName','op':'cn','data':''},{'field':'CityName','op':'cn','data':''}]};

        $('#InfView').jqGrid({
            url:url,
            colModel:[
                {label:'Player',name:'userName'},
                {label:'City',name:'CityName',align:'right',width:350}
            ]
        });

$('#InfView').navGrid('#InfViewP',{edit:false,add:false,del:false},{},{},{},gTmpl,{top:54,left:50,caption:'Search - Overview'});

I do not want to use tmplNames or tmplFilers (if at all possible). Is there any way around it? Lastly, without gTmpl, the search dialog would be properly located on browser, but when I have gTmpl in, the {top,left,caption...} is ignored and placed at 0,0.

Unless I have the parameters wrong, please do let me know.. Thanks!

Upvotes: 0

Views: 2268

Answers (1)

Oleg
Oleg

Reputation: 221997

What you probably want to implement is displaying the specified filter on the first opening of the searching dialog. Do do this you should first specify postData.filters and seconds to use multipleSearch:true and optionally multipleGroup:true as the searching option:

var myInitialFilter = {
        groupOp:'OR',
        rules: [
            {'field':'userName','op':'cn','data':''},
            {'field':'CityName','op':'cn','data':''}
        ]
    };

$('#InfView').jqGrid({
    url:url,
    colModel:[
        {label:'Player',name:'userName'},
        {label:'City',name:'CityName',align:'right',width:350}
    ],
    postData: {
        filters: myInitialFilter
    }
});

$('#InfView').navGrid('#InfViewP',{edit:false,add:false,del:false},{},{},{},
    {multipleSearch:true, top:54, left:50, caption:'Search - Overview'});

Additionally I would recommend you to consider to use free jqGrid instead of commercial Guriddo jqGrid JS (see the current prices here). Free jqGrid is the fork of jqGrid, which I develop and which can be used completely free of charge. It's compatible to jqGrid 4.7 (which features you use currently).

Free jqGrid has many new features, which can be helpful in some scenarios. For example, you load the data from the server and use loadonce: true option. It means that the server have to return sorted data. Free jqGrid has new option forceClientSorting: true, which can be used together with loadonce: true option. It force initial sorting on the client side. If you would add search: true option and would specify postData.filter, like in the above example, then the data returned from the server will be filtered and sorted locally before the first page of the data will be displayed. The user will be still able to change the filter and to display all the data.

Upvotes: 1

Related Questions