jqGrid Retain Invalid Cell Value After EditRules Pop Up

Question

@Oleg - I am new to jqGrid.I have three issues. Urgent help required. I am using jqGrid 3.8, inline edit mode.

1. I want to retain the invalid cell values after the pop up for invalid cell.
2. Also I want to set the focus back to the invalid cell.
3. I have "add row" and filter tool bar feature in my jqGrid. I have used Oleg's solution in creating drop down for filter tool bar (posted in another jQuery thread).

** - Problem:

** I am calling setSearchSelect from afterSaveCell, because I want to add new values in filter drop down every time I add or delete column.(Note: column is a textbox). But the filter tool bar isn't getting refreshed even if I use

var sgrid = $("#list")[0];
sgrid.triggerToolbar();

See the code below for setting the toolbar.

<script type="text/javascript">
var mydata = [
        {id:"1", Name:"Miroslav Klose",     Category:"sport",   Subcategory:"football"},
        {id:"2", Name:"Michael Schumacher", Category:"sport",   Subcategory:"formula 1"},
        {id:"3", Name:"Albert Einstein",    Category:"science", Subcategory:"physics"},
        {id:"4", Name:"Blaise Pascal",      Category:"science", Subcategory:"mathematics"}
    ],
    grid = $("#list"),
    getUniqueNames = function(columnName) {
        var texts = grid.jqGrid('getCol',columnName), 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;
    },
    setSearchSelect = function(columnName) {    
        grid.jqGrid('setColProp', columnName,
                    {
                        stype: 'select',
                        searchoptions: {
                            value:buildSearchSelect(getUniqueNames(columnName)),
                            sopt:['eq']
                        }
                    }
        );      
    };

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name:'Name', index:'Name', width:200 ,editable:true},
        { name:'Category', index:'Category', width:200,editable:true },
        { name:'Subcategory', index:'Subcategory', width:200,editable:true }
    ],
    sortname: 'Name',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    editurl: "clientArray",
    multiselect: true,
    pagination:true,
    cellEdit: true,
    cellsubmit: 'clientArray',
    //ignoreCase: true,
    pager: '#pager',
    height: "auto",
    enableSearch: true,
    caption: "How to use filterToolbar better locally", 
    afterSaveCell: function(rowid,name,val,iRow,iCol) { 
        setSearchSelect(name);  

        jQuery("#list").('setColProp', name,
                    {
                       width:100
                    }
        );
        var sgrid = $("#list")[0];
        sgrid.triggerToolbar();
alert(name);        
    },
    loadComplete: function () {
                    setSearchSelect('Category');    
                }
}).jqGrid('navGrid','#pager',
          {edit:false, add:false, del:false, search:false, refresh:true});

setSearchSelect('Category');
setSearchSelect('Subcategory');

grid.jqGrid('setColProp', 'Name',
            {
                searchoptions: {
                    sopt:['cn'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:getUniqueNames('Name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });

grid.jqGrid('filterToolbar',
            {stringResult:true, searchOnEnter:true, defaultSearch:"cn"});


function addRow(tableId){
    var loopRow = document.getElementById("addRowsInput").value;                
    var recordCount = '';
    var rwData = '';
    //var selRowIds = getRowIDs('list');
    var gridProducts =  $("#list"); 
    var resetFirstRow = jQuery("#list").getRowData( 1 );
    jQuery("#list").setRowData( 1, resetFirstRow );
    if(loopRow == null || loopRow == "" || loopRow == "Enter number of units to be added")
    {
        loopRow = 1;
    }

        for(i=0; i< loopRow; i++)
        {       
                recordCount = jQuery("#list").getGridParam("records") ;
                var emptydata = [
                    {id:(recordCount+1), Name:"",     Category:"",   Subcategory:""}]
                    gridProducts.jqGrid('addRowData', recordCount+1, emptydata[0]);                                 
        }
    }
</script>

@Oleg - one more question on the solution you suggested. Sorry I tried myself to find it but couldn't. In the buildSearchSelect: method , how can I include filter for empty string. As explained above I have a "Add Row" button. So when the user wants to filter rows with empty columns I need a filter value.

Answer 1

The implementation of setSearchSelect function from my old answer work only if the searching toolbar not yet exist. If the toolbar exist one have to modify the options of the select element or autocomplete source of the jQuery UI autocomplete widget.

I extended the code. You can see the new version of the demo here. In the same way one could use inline editing instead of the cell editing.

Here is the modified JavaScript code:

var mydata = [
        {id:"1", Name:"Miroslav Klose",     Category:"sport",   Subcategory:"football"},
        {id:"2", Name:"Michael Schumacher", Category:"sport",   Subcategory:"formula 1"},
        {id:"3", Name:"Albert Einstein",    Category:"science", Subcategory:"physics"},
        {id:"4", Name:"Blaise Pascal",      Category:"science", Subcategory:"mathematics"}
    ],
    grid = $("#list"),
    getUniqueNames = function(columnName) {
        var texts = grid.jqGrid('getCol',columnName), 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);
            }
        }
        uniqueTexts.sort();
        return uniqueTexts;
    },
    buildSearchSelect = function(uniqueNames) {
        var values=":All";
        $.each (uniqueNames, function() {
            values += ";" + this + ":" + this;
        });
        return values;
    },
    setSearchSelect = function(columnName) {
        var $select = $('select#gs_'+columnName), un = getUniqueNames(columnName),
            htmlForSelect = '<option value="">All</option>', i, l=un.length, val;
        grid.jqGrid('setColProp', columnName,
                    {
                        stype: 'select',
                        searchoptions: {
                            value:buildSearchSelect(un),
                            sopt:['eq']
                        }
                    }
        );
        if ($select.length > 0) {
            // The searching toolbar already exist. One have to update it manually
            for (i=0;i<l;i++) {
                val = un[i];
                htmlForSelect += '<option value="'+val+'">'+val+'</option>';
            }
            $select.html(htmlForSelect);
        }
    },
    setAutocomplete = function(columnName) {
        var $input = $('input#gs_'+columnName), un = getUniqueNames(columnName);
        grid.jqGrid('setColProp', columnName,
                    {
                        searchoptions: {
                            sopt:['cn'],
                            dataInit: function(elem) {
                                $(elem).autocomplete({
                                    source:un,
                                    delay:0,
                                    minLength:0
                                });
                            }
                        }
                    });
        if ($input.length > 0) {
            // The searching toolbar already exist. One have to update the source
            $input.autocomplete('option', 'source', un);
        }
    },
    selectColumns = ['Category','Subcategory'], autocompleteColumns = ['Name'];

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name:'Name', index:'Name', width:200 ,editable:true},
        { name:'Category', index:'Category', width:200,editable:true },
        { name:'Subcategory', index:'Subcategory', width:200,editable:true }
    ],
    sortname: 'Name',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    cellEdit: true,
    cellsubmit: 'clientArray',
    ignoreCase: true,
    pager: '#pager',
    height: "auto",
    caption: "How to use filterToolbar better locally including local cell editing",
    afterSaveCell: function(rowid,name,val,iRow,iCol) {
        if ($.inArray(name,selectColumns) !== -1) {
            setSearchSelect(name);
        } else if ($.inArray(name,autocompleteColumns) !== -1) {
            setAutocomplete(name);
        }
    }
}).jqGrid('navGrid','#pager',
          {edit:false, add:false, del:false, search:false, refresh:true});

$.each(selectColumns,function() {
    setSearchSelect(String(this));
});

$.each(autocompleteColumns,function() {
    setAutocomplete(String(this));
});

grid.jqGrid('filterToolbar',
            {stringResult:true, searchOnEnter:true, defaultSearch:"cn"});