javascript - Customizing the Add/Edit Dialog in jqGrid

Question

Sorry I can't post images, I'm too new.

In jqGrid add/edit dialogs I would like to load a list of selectable items based on a selection made earlier. In the picture above, the value selection should be loaded based on the value chosen in the criteria selection. I believe the route to go is using the dataurl in the editoptions object but I am having issues in that regards. The first issue that was troubling was based on the documentation here it doesn't seem like there is an event available to fire when the value of criteria changes that will allow me to update the values list.

Also I'm confused on how the data should be returned from the ajax request. In the documentation it says :

Setting the editoptions dataUrl parameter The editoptions dataUrl parameter is valid only for element of edittype:select. The dataUrl parameter represent the url from where the html select element should be get. When this option is set, the element will be filled with values from the AJAX request. The data should be a valid HTML select element with the desired options"

does this mean I will need to generate the html and return this as part of the response? Previously I had been passing all of my data using json.

Answer 1

jqGrid has no simple support of dependent selects in the editoptions. So to implement is one have to use change event on the main select to manually update the list of options of the second (dependent) select.

In the demo you will find how you can implement dependent selects. I used in the demo 'local' datatype and so set value property of the editoptions instead of dataUrl, but the main schema what should be done stay the same. Moreover in the demo I use not only form editing, but inline editing too. The code work in both cases. Because jqGrid don't support local editing in the form editing mode, the submitting of the forms not work. I could of cause use the tricks which I described here, but the code will be much longer and will contain many things which are far from your main question. So I decided to post the code in the form where submitting is not work.

Below you find the code from the demo:

var countries = { '1': 'US', '2': 'UK' },
    states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' },
    statesOfUS = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
    statesOfUK = { '5': 'London', '6': 'Oxford' },
    // the next maps contries by ids to states
    statesOfCountry = { '1': statesOfUS, '2': statesOfUK },
    mydata = [
        { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
        { id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
        { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
        { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
    ],
    lastSel = -1,
    grid = $("#list"),
    resetStatesValues = function () {
        // set 'value' property of the editoptions to initial state
        grid.jqGrid('setColProp', 'State', { editoptions: { value: states} });
    };

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name: 'Name', width: 200 },
        {
            name: 'Country',
            width: 100,
            editable: true,
            formatter: 'select',
            edittype: 'select',
            editoptions: {
                value: countries,
                dataInit: function (elem) {
                    var v = $(elem).val();
                    // to have short list of options which corresponds to the country
                    // from the row we have to change temporary the column property
                    grid.jqGrid('setColProp', 'State', { editoptions: { value: statesOfCountry[v]} });
                },
                dataEvents: [
                    {
                        type: 'change',
                        fn: function (e) {
                            // build 'State' options based on the selected 'Country' value
                            var v = $(e.target).val(),
                                sc = statesOfCountry[v],
                                newOptions = '',
                                stateId,
                                form,
                                row;
                            for (stateId in sc) {
                                if (sc.hasOwnProperty(stateId)) {
                                    newOptions += '<option role="option" value="' + stateId + '">' +
                                        states[stateId] + '</option>';
                                }
                            }

                            resetStatesValues();

                            // populate the subset of contries
                            if ($(e.target).is('.FormElement')) {
                                // form editing
                                form = $(e.target).closest('form.FormGrid');
                                $("select#State.FormElement", form[0]).html(newOptions);
                            } else {
                                // inline editing
                                row = $(e.target).closest('tr.jqgrow');
                                $("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions);
                            }
                        }
                    }
                ]
            }
        },
        {
            name: 'State',
            width: 100,
            editable: true,
            formatter: 'select',
            edittype: 'select',
            editoptions: { value: states }
        }
    ],
    onSelectRow: function (id) {
        if (id && id !== lastSel) {
            if (lastSel !== -1) {
                resetStatesValues();
                grid.jqGrid('restoreRow', lastSel);
            }
            lastSel = id;
        }
    },
    ondblClickRow: function (id) {
        if (id && id !== lastSel) {
            grid.jqGrid('restoreRow', lastSel);
            lastSel = id;
        }
        resetStatesValues();
        grid.jqGrid('editRow', id, true, null, null, 'clientArray', null,
            function () {  // aftersavefunc
                resetStatesValues();
            });
        return;
    },
    editurl: 'clientArray',
    sortname: 'Name',
    ignoreCase: true,
    height: '100%',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    pager: '#pager',
    caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: true },
    { // edit options
        recreateForm: true,
        viewPagerButtons: false,
        onClose: function () {
            resetStatesValues();
        }
    },
    { // add options
        recreateForm: true,
        viewPagerButtons: false,
        onClose: function () {
            resetStatesValues();
        }
    });

UPDATED: See "UPDATED 2" part of the answer for the most recent version on the demo.