To update JqGrid Data by a custom formatter also, like in case of JqGrid inline editing

Question

We have a JqGrid with Custom Select Formatter. On change of select we are preserving changes into a global var globalGridChanges. globalGridChanges is send for save. We are working on json data type, no server side posting.

jQuery("#jQGrid").jqGrid({
    datatype: "jsonstring",
    datastr: Data,
    height: 400,
    scroll: 0,
    rowNum: 18,
    rowList: [100, 120, 140, 150],
    colNames: ['id', 'Issue Name', 'Indicator']

colModel: [ { name: 'id', index: 'id', hidden: true }, 
    { name: 'SIN', index: 'SIN', width: 200, sortable: true }, 
    {name: 'DI', index: 'DI', width: 125, fixed: true, title: false, formatter: BuildDI }],ignoreCase: true });


// Fortmatter Function 
function BuildDI(cellvalue, options, rowObject) {
    var s = '<select  class="DI" idAttr="+options["rowId"]+" width="100%"><option value=""></option>' <option value="1">A</option>'<option value="2">B</option></select>';
    return s;
    }


// Biding event to class DI

jQuery(document).on("change", ".DI", function () {
    UpSaveData(this);
});


var globalGridChanges= Enumerable.Empty().ToDictionary();

function UpSaveData(obj) {
value = new oData();
id=obj.idAttr;
value.DI=obj.val();
globalGridChanges.Add(id, value);
}

This is working fine, now we need to implement a Custom Search (Excel Like Filter) on jQGrid. We are planning to create a HeaderSeach function for this, sample code is given;

jQuery.extend({ HeaderSeach: function (_this) {
    var $grid = _this;
    var col = $grid.getGridParam('colModel');
    var cn = $grid.getGridParam('colNames');
    var colL = col.length;
    var gridP = ''
    var gridId =jQuery(_this).attr('id');
    jQuery(col).each(function (x) {
        var c = this;
        //gridP = $grid.jqGrid('getGridParam', c['name'])
        if (!(c.hidden) && !(c['name'] == 'subgrid')) {
            $grid.jqGrid('setLabel', c['name'], createSearchSpan(cn[x], c['name'], gridId));

        }
    });

}
});

Our createSearchSpan is creating a DIV having buttons, options, search event biding which is very simlar to windows Excel Filter.

In above approach we are maintaing data Changes in to a seperate variable globalGridChanges and grid data(.p) remains unchanged. Our search will not consider the changed data and will work on the data loaded intially into jqGrid. We can use merge approach (jqgrid data + globalGridChanges), but this will be specific to this approach.

For resolving this we are looking to update JqGrid Data by a custom formatter also, like in case of JqGrid inline editing. Trying to avoid to update the JqGrid data in UpSaveData function.

Answer 1

Formatter alone should be used for display formatting for and for edting purpose we should also use JqGrid editoptions. This has solved our problem.

Answer 2

I think There's no need to make custom component for this, jqGrid has "filterToolbar". See exmaples here and here In your case it should looks something like this

jQuery("#jQGrid").jqGrid('filterToolbar', {
        searchOnEnter: true,
        searchOperators: true,
        multipleSearch: true,
        stringResult: true,
        groupOps: [{ op: "AND", text: "all" }, { op: "OR", text: "any" }],
        defaultSearch: 'cn', ignoreCase: true
    });

And don't forget to add search: true to the columns like this

colModel: [ { name: 'id', index: 'id', hidden: true }, 
    { name: 'SIN', index: 'SIN', width: 200, sortable: true, search: true }, 
    {name: 'DI', index: 'DI', width: 125, fixed: true, title: false,search: true, formatter: BuildDI        }],ignoreCase: true });

Hope it helps.