JQGrid Inline Editing : Filter subcategory dropdown list based on another category dropdown

Question

hi,

I have a category and a subcategory column in a Jqgrid. I have enabled inline editing, both category and subcategory are dropdownlists columns (edittype:'select'). I need to filter the subcategory list based on the selected category. I wonder how can I acheive this functionlity?

I tried the below event but its not working for me afterEditCell: function(rowid, celname, value, iRow, iCol) { //to do here }

the above event doesn't get fired. my all column are editable

Thanks,

Answer 1

This question will be often asked. So I wrote a small code example which demonstrate how to implement such scenario with local data only (for jqGrid starting with 3.7.x). For data editing (inline editing) I use here the double-click event. The modified data will be saved after pressing of the "enter" key. For the filling of select elements I use ids. If you prefer use texts of the categories and subcategories instead you should remove formatter:'select' and make the corresponding changes in building of <option> elements (see code of dataEvents event handler).

var categories = ["sport", "science"];
var subcategories = ["football", "formel 1", "physics", "mathematics"];
var mydata = [
    {Name:"Lukas Podolski",     Category:0, Subcategory:0},
    {Name:"Michael Schumacher", Category:0, Subcategory:1},
    {Name:"Albert Einstein",    Category:1, Subcategory:2},
    {Name:"Blaise Pascal",      Category:1, Subcategory:3}
];
var subcategoriesOfCategory = [
    ["football", "formel 1"],
    ["physics", "mathematics"]
];

var grid = jQuery("#list").jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name: 'Name', width: 200 },
        { name: 'Category', width: 200, editable:true, formatter:'select',
          edittype:'select', editoptions: {
              value: categories,
              dataInit : function (elem) {
                  var v = $(elem).val();
                  grid.setColProp('Subcategory', {
                                  editoptions:{value:subcategoriesOfCategory[v]}});
              },
              dataEvents: [
                  { type: 'change',
                    data: { id: 7 },
                    fn: function(e) {
                        var v=$(e.target).val();
                        var sel = grid.getGridParam('selrow');
                        grid.setColProp('Subcategory', { editoptions:
                                              {value:subcategoriesOfCategory[v]}});
                        var res = '';
                        var sc = subcategoriesOfCategory[v];
                        for (var i=0; i<sc.length; i++) {
                            res += '<option role="option" value="' + i + '">' +
                                   sc[i] + '</option>';
                        }
                        $("select#"+sel+"_Subcategory").html(res);
                    }
                  }
              ]
          }
        },
        { name: 'Subcategory', width: 200, editable:true, formatter:'select',
          edittype:'select', editoptions: {value: subcategories} }
    ],
    onSelectRow: function(id) {
        if (id && id !== lastSel) {
            grid.restoreRow(lastSel);
            lastSel = id;
        }
    },
    ondblClickRow: function(id, ri, ci) {
        if (id && id !== lastSel) {
            grid.restoreRow(lastSel);
            lastSel = id;
        }
        grid.editRow(id, true);
        return;
    },
    editurl: 'clientArray',
    sortname: 'Name',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    pager: '#pager',
    caption: "Inline Editing example"
}).navGrid('#pager', { edit: false, add: false, del: false,
                       search: false, view: false });

This example can be of cause modified for the case of building of select option from the server.