Display ComboBox (DropDownList) in jqGrid column using jQuery jqGrid Plugin

Last Reply one month ago By dharmendr

Posted 2 months ago

Hi all

I am attempting to develop a grid that contains a column of type combo box. I want the combo-box to appear on each row with the options specified. 

The problem is that the combo box column (ManageMentCost) does not display the box or the values. Does anybody know what I am doing wrong? 

This is my code so far:

           colModel: [
                        { name: 'PropertyID', index: 'PropertyID', width: 70, align: "left", stype: 'text', sortable: true},
   		                { name: 'PropertyRef', index: 'PropertyRef', width: 75, align: "left", stype: 'text', sortable: true},
   		                { name: 'ShortAddress', index: 'ShortAddress', width: 200,  align: "center", sortable: true},
   		                { name: 'SchemeCode', index: 'SchemeCode', width: 80, align: "center", sortable: true },
   		                { name: 'SchemeName', index: 'SchemeName', width: 80, align: "center",  sortable: true },
   		                { name: 'PropertyType', index: 'PropertyType', width: 80, align: "center", sortable: true },
   		                { name: 'TenureType', index: 'TenureType', width: 80, align: "center",  sortable: true },
   		                { name: 'Status', index: 'Status', width: 75,  align: "center", sortable: true },
                {
                    name: 'ManagementCost', index: 'ManagementCost', width: 110, align: "center", editable: true, edittype: "select",
                    editoptions: { value: "M10N:MGMT_10_PCENT_N;M10SW:MGMT_10_PCENT_SW;M15N:MGMT_15_PCENT_N;M15SW:MGMT_15_PCENT_SW" }
                },
                        { name: 'RentChargeMonth', index: 'RentChargeMonth', width: 100, align: "center", sortable: true },
                        { name: 'SCChargeMonth', index: 'SCChargeMonth', width: 100, align: "center", sortable: true }
   	                  ],
            height: 'auto',
            width: 'auto',
            rowNum: 30,
            editable: true,
            mtype: 'GET',
            loadonce: true,
            rowList: [30, 40, 50],
            pager: '#jQGridDemoPager',
            sortname: 'PropertyId',            
            viewrecords: true,
            sortorder: 'desc',

Thanks.

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago Modified on one month ago

Hi Sanxion,

Refer below sample example.

HTML

<table id="jqGrid01">
</table>
<div id="jQGridDemoPager" style="height: 50px;">
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>
<script type="text/javascript">
    $(function () {
        var customers = [
                        { id: "1", name: "John Hammond", country: "United States" },
                        { id: "2", name: "Mudassar Khan", country: "India" },
                        { id: "3", name: "Suzanne Mathews", country: "France" },
                        { id: "4", name: "Robert Schidner", country: "Russia" }
                        ];
        $("#jqGrid01").jqGrid({
            datatype: "jsonstring",
            datastr: customers,
            colNames: ["Id", "Name", "Country"],
            colModel: [
                        { name: 'id', index: 'id', hidden: false, key: true },
                        { name: 'name', index: 'name', editable: true },
                        { name: 'country', index: 'country', align: 'center', sortable: true, cellEdit: true,
                            formatter: 'select', editable: true, edittype: 'select', stype: 'select',
                            editoptions: { value: "United States:United States;India:India;France:France;Russia:Russia" }
                        }
                    ],
            height: 'auto',
            width: 'auto',
            rowNum: 2,
            editable: true,
            loadonce: true,
            rowList: [30, 40, 50],
            pager: "#jQGridDemoPager",
            sortname: 'id',
            viewrecords: true,
            sortorder: 'desc',
            gridview: true,
            treeGrid: false,
            treeGridModel: 'adjacency',
            treedatatype: "local",
            ExpandColumn: 'name',
            add: true,
            edit: true,
            addtext: 'Add',
            edittext: 'Edit',
            caption: "jQ Grid"
        });

        $("#jqGrid01").jqGrid('navGrid', '#jQGridDemoPager',
                                { edit: true, add: true, del: true, search: true },
                                { height: 200, reloadAfterSubmit: true }
                            );
        $("#jqGrid01").jqGrid('setGridWidth', $(".content").width(), true);
    });
</script>

Demo