Question

I have a jqGrid that when I go into edit mode I need to have 2 select lists. I need the second list to filter based on the selection from select list 1.

This is my first attempt at working with jqGrid so I am having some troubles with things.

I have seen a few examples that are using hard coded arrays etc., but I need to pull the information from a database and I am having trouble getting it to work.

I guess I need to have my hand held through this one. :-p

My columns in question are the AssemblyTypeName and the AssemblyName, I need to fill them in that order.

My jqGrid code is below:

    $("#jqTable").jqGrid({
        // Ajax related configurations
        url: '@Url.Action("_CustomBinding")',
        datatype: "json",
        mtype: "POST",
        postData: {
            programID: function () { return $("#ProgramID option:selected").val(); },
            buildID: function () { return $('#Builds option:selected').val(); }
        },
        // Specify the column names
        colNames: ["Actions", "Assembly ID", "Assembly Type", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"],

        // Configure the columns
        colModel: [
        { name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} },
        { name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
        { name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: true, edittype: 'select',
            editoptions: {
                dataUrl: '@Url.Action("_AssemblyTypes")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        },
        { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
            editoptions: {
                dataUrl: '@Url.Action("_Assemblies")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        },
        { name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
        { name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
        { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],

        // Grid total width and height and formatting
        //width: 650,
        //height: 220,
        altrows: true,

        // Paging
        //toppager: true,
        pager: $("#jqTablePager"),
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true, // Specify if "total number of records" is displayed
        emptyrecords: 'No records to display',

        // Default sorting
        sortname: "AssemblyID",
        sortorder: "asc",

        // Grid caption
        caption: "Build Template",

        // grid command functionality
        editurl: '@Url.Action("_AjaxUpdate")',
        onSelectRow: function (AssemblyID) {
            if (AssemblyID && AssemblyID !== lastsel) {
                $('#jqTable').jqGrid('restoreRow', lastsel);
                var cm = $("#jqTable").jqGrid('getColProp', 'AssemblyTypeName');
                cm.editable = false;
                $("#jqTable").jqGrid('editRow', AssemblyID, true);
                cm.editable = true;
                lastsel = AssemblyID;
            }
        }
    }).navGrid("#jqTablePager",
        { refresh: false, add: true, edit: false, del: false },
            {}, // settings for edit
            {}, // settings for add
            {}, // settings for delete
            {sopt: ["cn"]} // Search options. Some options can be set on column level
     );

Thanks for the help and patience.

Answer 1

// Set up the jquery grid
    $("#jqTable").jqGrid({
        // Ajax related configurations
        url: '@Url.Action("_CustomBinding")',
        datatype: "json",
        mtype: "POST",
        postData: {
            programID: function () { return $("#ProgramID option:selected").val(); },
            buildID: function () { return $('#Builds option:selected').val(); }
        },
        // Specify the column names
        colNames: ["Assembly ID", "Assembly Type", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"],

        // Configure the columns
        colModel: [
        {name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
        { name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: true, edittype: 'select',
            editoptions: {
                dataUrl: '@Url.Action("_AssemblyTypes")',
                buildSelect: function (data) {
                    jqGridAssemblyTypes = jQuery.parseJSON(data);
                    var s = '<select>';
                    if (jqGridAssemblyTypes && jqGridAssemblyTypes.length) {
                        for (var i = 0, l = jqGridAssemblyTypes.length; i < l; i++) {
                            var ri = jqGridAssemblyTypes[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                },
                dataInit: function (elem) {
                    var AssemblyTypes = $(elem).val();
                    $("#jqTable").setColProp('AssemblyName', { editOptions: { dataUrl: '@Url.Action("Assemblies", "Build")' + '/' + AssemblyTypes} });
                },
                dataEvents: [
                {
                    type: 'change',
                    fn: function (e) {
                        var AssemblyType = $(e.target).val();

                        $.ajax({
                            url: '_JQGridAssemblies',
                            data: { AssemblyTypes: AssemblyType },
                            dataType: 'json',
                            async: false,
                            success: function (assemblies) {
                                jqGridAssemblies = assemblies;
                            }
                        });

                        resetAssemblyValues();

                        // build 'AssemblyName' options based on the selected 'AssemblyType' value
                        var sc = jqGridAssemblies;
                        var newOptions = '';
                        for (var assemblyName in sc) {
                            if (sc.hasOwnProperty(assemblyName)) {
                                newOptions += '<option role="option" value="' +
                                              jqGridAssemblies[assemblyName] + '">' +
                                              jqGridAssemblies[assemblyName] + '</option>';
                            }
                        }

                        // populate the new
                        if ($(e.target).is('.FormElement')) {
                            // form editing
                            var form = $(e.target).closest('form.FormGrid');
                            $("select#AssemblyName.FormElement", form[0]).html(newOptions);
                        }

                    }
                }
            ]

            }
        },
        { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
            editoptions: {
                dataUrl: '@Url.Action("_Assemblies")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        },
        { name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
        { name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
        { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],

        // Grid total width and height and formatting
        //width: 650,
        //height: 220,
        altrows: true,

        // Paging
        //toppager: true,
        pager: $("#jqTablePager"),
        rowNum: 10,
        rowList: [10, 20, 50, 100],
        viewrecords: true, // Specify if "total number of records" is displayed
        emptyrecords: 'No records to display',

        // Default sorting
        sortname: "AssemblyID",
        sortorder: "asc",

        // Grid caption
        caption: "Build Template",

        // grid command functionality
        editurl: '@Url.Action("_AjaxUpdate")'
    }).navGrid("#jqTablePager",
        { refresh: false, add: true, edit: true, del: true },
            {
                url: '@Url.Action("_AjaxUpdate")',
                editData: {
                    extraParam: function (params, postdata) {
                        programID = $("#ProgramID option:selected").val();
                        buildID = $('#Builds option:selected').val();
                        startDate = $('#DateBegin').val();
                        endDate = $('#DateEnd').val();
                        return programID + '|' + buildID + '|' + startDate + '|' + endDate;
                    },
                    reloadAfterSubmit: true,
                    closeAfterEdit: true
                }
            }, // settings for edit
            {
                url: '@Url.Action("_AjaxUpdate")',
                addData: {
                    extraParam: function (params, postdata) {
                        programID = $("#ProgramID option:selected").val();
                        buildID = $('#Builds option:selected').val();
                        startDate = $('#DateBegin').val();
                        endDate = $('#DateEnd').val();
                        return programID + '|' + buildID + '|' + startDate + '|' + endDate;
                    },
                    reloadAfterSubmit: true,
                    closeAfterAdd: true
                }
            }, // settings for add
            {
                url: '@Url.Action("_AjaxUpdate")',
                delData: {
                    extraParam: function (params, postdata) {
                        programID = $("#ProgramID option:selected").val();
                        buildID = $('#Builds option:selected').val();
                        startDate = $('#DateBegin').val();
                        endDate = $('#DateEnd').val();
                        return programID + '|' + buildID + '|' + startDate + '|' + endDate;
                    },
                    reloadAfterSubmit: true,
                    closeAfterDelete: true
                }
            }, // settings for delete
            {sopt: ["cn"]} // Search options. Some options can be set on column level
     );