Search code examples
jquerysearchfree-jqgrid

Free jqGrid loaded with predefined search and further search behaviour

Grid definition:

$grid.jqGrid({
        url:'xtras/Products.php',
        editurl:'xtras/Products.php',
        datatype: "json",
        mtype:'POST',
        colModel:[ 
            {name:'Catalogue',index:'catalogue.Catalogue', width:100, editable:true},
            {name:'Artist',index:'catalogue.Artist', width:170,align:"left", editable:true},
            {name:'Title',index:'catalogue.Title', width:200,align:"left", editable:true},
        ...
        ],
        postData: {
            filters: JSON.stringify({
                groupOp: "OR",
                rules: [
                    { field: "Catalogue", op: "cn", data: "<?php echo $search; ?>" },
                    { field: "Artist", op: "cn", data: "<?php echo $search; ?>" },
                    { field: "Title", op: "cn", data: "<?php echo $search; ?>" }
                ]
            })
        },
        search: true,
        .....
}).jqGrid("navGrid", pagerIdSelector, {add: false, edit: false, refreshstate: "current"},
            {},{},{},
            {multipleSearch:true, sopt:['eq','ne','cn','bw','bn','ge','le','lt','gt'], showQuery: false}, {})

Where $search is

$search  = @htmlspecialchars(trim($_REQUEST['search']));

This works fine with search defined or not. However, after the grid loaded and if I want to perform a new search, when I open Search box it looks like this (I was expecting Catalogue, Artist, Title..): enter image description here

At this point - if I'm trying to redefine shown dropdowns - the search will be performed on already predefined text instead of starting a new search.

It will only perform a search from scratch if I first delete all the selects then add a new select by pressing +

How can I either: Redefine search from the given selects OR Reset all selects in the Search box after search box is open?

Solution

  • There are the searching option loadDefaults with default value true. It informs jqGrid to load the filter from postData.filters. If I correctly understand your problem then you should just include the option loadDefaults: false near to multipleSearch:true.

    By the way I find difficult to read navGrid parameters because of large number of parameters with the values {}. Free jqGrid allows to define searching option of jqGrid with the same searching options which you could use in navGrid or filterToolbar. If allows to reduce the number of parameters of navGrid. Additionally free jqGrid can create the div for the pager if you would use pager: true and you can skip the pager parameter in navGrid, inlineNav and navButtonAdd. In other words you can rewrite your code to the following

    $grid.jqGrid({
    url:'xtras/Products.php',
    editurl:'xtras/Products.php',
    datatype: "json",
    mtype:'POST',
    colModel:[ 
        {name:'Catalogue',index:'catalogue.Catalogue', width:100},
        {name:'Artist',index:'catalogue.Artist', width:170},
        {name:'Title',index:'catalogue.Title', width:200},
    ...
    ],
    cmTemplate: {editable: true},
    postData: {
        filters: JSON.stringify({
            groupOp: "OR",
            rules: [
                { field: "Catalogue", op: "cn", data: "<?php echo $search; ?>" },
                { field: "Artist", op: "cn", data: "<?php echo $search; ?>" },
                { field: "Title", op: "cn", data: "<?php echo $search; ?>" }
            ]
        })
    },
    search: true,
    searching: {
        multipleSearch: true,
        loadDefaults: false,
        sopt: ['eq','ne','cn','bw','bn','ge','le','lt','gt'],
        showQuery: false
    },
    navOptions: { add: false, edit: false, refreshstate: "current" }
    .....

}).jqGrid("navGrid");