Does jQuery jqGrid edit form support fields that are multiselect?

Question

I am still trying to find out if I can have a cell in a jqGrid, and when I pull up the edit form for that row, I need a GUI that can display that column as a multiselect list.

This could either be:

1. List of checkboxes
2. Select List with checkboxes so you can select more than one.

Is this possible in jqGrid?

Answer 1

jqGrid supports multiselect editing. It uses no ceckboxes for selection, but multiselect select element. I made the demo using inline editing on double-click.

Here is the corresponding code:

jQuery(document).ready(function() {
    var lastSel, mydata = [
        {id:0, Name:"Lukas Podolski",     Category:"1", Subcategory:"1"},
        {id:1, Name:"Michael Schumacher", Category:"1", Subcategory:"2"},
        {id:2, Name:"Albert Einstein",    Category:"2", Subcategory:"3,4"},
        {id:3, Name:"Blaise Pascal",      Category:"2", Subcategory:"4"}
    ], grid = jQuery("#list");
    grid.jqGrid({
        data: mydata,
        datatype: 'local',
        colModel: [
            { name: 'Name', index: 'Name', width: 130, editable: true },
            {
                name: 'Category', index: 'Category', width: 100,
                formatter:'select', editable: true, edittype:'select',
                editoptions: {
                    value: '1:sport;2:science',
                    multiple: true,
                    size: 2
                }
            },
            {
                name: 'Subcategory', index: 'Subcategory', width: 250,
                formatter:'select', editable:true, edittype:'select',
                editoptions: {
                    value: '1:football;2:formula 1;3:physics;4:mathematics',
                    multiple: true,
                    size: 4
                }
            }
        ],
        sortname: 'Name',
        viewrecords: true,
        rownumbers: true,
        sortorder: 'desc',
        pager: '#pager',
        height: '100%',
        editurl: 'clientArray',
        ondblClickRow: function(rowid) {
            jQuery(this).jqGrid('editRow', rowid, true, null, null, 'clientArray');
        },
        onSelectRow: function(id){
            if (id && id!==lastSel){
                jQuery(this).restoreRow(lastSel);
                lastSel=id;
            }
        },
        caption: 'Selects with multiselect'
    });
});

By the way during creating the demo I find out, that one can't use select elements having "0" as the id, which are not full supported. For example, '1:sport;2:science' works, but not '0:sport;1:science'. In the case the selection of the 'sport' item will not saved.

If you need to use more comfortable controles with checkboxes you have to implement the behavior with respect of custom editing.