Refresh multiselect dropdown dynamically in jqgrid edit

Question

I am trying to populate a multiselect dropdown dynamically in jqgrid edit. The jqgrid has two dropdowns namely, role and roletype. The roletype options should change as per the option selected in role. However, though the ajax call gets new values on role drop down change event, the roletype does not refresh. The code is as follows:

var selRoleVal;

var mygrid = $("#MyGrid"),
         ...
   , getRoleTypes = function () {
        var roleTypeData;

        $.ajax({
            type: "POST",
            url: "Page/GetDefinitions",               
            data: "{'roleID': '" + selRoleVal + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (json) {
                roleTypeData = json;
            },
            error: function (json) {
                alert("Failed ...");
            }
        });
        return roleTypeData;

    }

    , setRoleTypeValues = function (role) {

        mygrid.jqGrid('setColProp', 'RoleType', {
            editoptions: {
                value: function (elem) {
                   var roleTypeData;

                    roleTypeData = getRoleType();
                    return roleTypeData;
                }
                , recreateForm: true

            }

        });

    };



mygrid.jqGrid({
        ...,            
        colNames: ['ID', 'Role', 'Role Type'],
        colModel: [
                    { name: 'id', index: 'id', width: 20, editable: false,     editoptions: { readonly: true, size: 1 } },                        
                    {
                        name: 'RoleName', index: 'RoleName', align: "center", width:   80, sortable: true, editable: true, edittype: "select", stype: "select",
                        searchoptions: {
                            value: RoleList
                        },
                        editoptions: {
                            value: RoleList,
                            dataInit: function (elem) {
                                selRoleVal = $(elem).val();
                            },
                            dataEvents: [{
                                type: 'change',
                                fn: function (e) {
                                     selRoleVal = $(e.target).val();
                                    setRoleTypeValues($(e.target).val());
                                 }
                            }]

                        }
                    },
                    {
                        name: 'RoleType', index: 'RoleType', width: 100, sortable: true, editable: true, edittype: "select", 
                         editoptions: {
                             value: getRoleType
                                 ,
                            dataInit: function (elem) {
                                    $(elem).multiselect({
                                        minWidth: 80, 
                                        height: 200,
                                        selectedList: 10,
                                        checkAllText: "Check all",
                                        uncheckAllText: "Uncheck all",
                                        noneSelectedText: "Any",
                                        open: function () {
                                            var $menu = $(".ui-multiselect-menu:visible");
                                            $menu.width("auto");
                                            return;
                                        }


                                    })

                                    $(elem).multiselect('refresh');

                            },
                            multiple: true
                        }
                    }

        ],
        rowNum: 20,
        rowList: [20, 40, 60],
        ...
        editurl: ...

        ....

    }).jqGrid('navGrid', '#MyPager', {
        ....
        , edit: true
        , add: true
        , del: true
        , search: false
        , recreateForm: true 
    })

What should I include to refresh roletype dropdown ?

Sumit Sumit · Accepted Answer · 2013-12-16T03:00:49

Take a look at the first item in the discussion section of http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules, it demonstrates how you can reference the roletype select from the role select. Try something like this.

setRoleTypeValues = function (roleSelect, role) {

    var roleTypeSelect = roleSelect.closest("tr").find("select#RoleType");
    roleTypeSelect.empty().html(roleTypeDataOptionsAsHtml); 
    roleTypeSelect.multiselect('refresh');
    });

};

               {
                    name: 'RoleName', index: 'RoleName', align: "center", width:   80, sortable: true, editable: true, edittype: "select", stype: "select",
                    searchoptions: {
                        value: RoleList
                    },
                    editoptions: {
                        value: RoleList,
                        dataInit: function (elem) {
                            selRoleVal = $(elem).val();
                        },
                        dataEvents: [{
                            type: 'change',
                            fn: function (e) {
                                 selRoleVal = $(e.target).val();
                                setRoleTypeValues($(e.target), $(e.target).val());
                             }
                        }]

                    }
                },

Hope that makes sense.

Refresh multiselect dropdown dynamically in jqgrid edit

1 Answers