Question

I am generating column model at server end using C# and passing jSON to the grid. Now I want one column to give a dropdown functionality. But it is not working out, this is what I have so far:

StringBuilder deptDetails = new StringBuilder();
foreach (Department dept in departmentList)
{
    deptDetails.Append(dept.DepartmentID);
    deptDetails.Append(":'");
    deptDetails.Append(":'" + dept.DepartmentName + "',");
    deptDetails.Append(',');
}
deptDetails.Length -= 1;

colModel[i] = new ColumnMod
{
    name = selectedItems[i].ToString(),
    index = selectedItems[i].ToString(),
    width = 100,
    editable = true,
    edittype = "select",
    align = "left",
    editoptions="{value:{" + deptDetails + "}}"
 };

Here is my columnmodel class:

public class ColumnMod
{
    public string name { get; set; }
    public string index { get; set; }
    //public Boolean key { get; set; }
    public Int32 width { get; set; }
    public Boolean editable { get; set; }
    public string edittype { get; set; }
    //public Boolean sortable { get; set; }
    public string align { get; set; }
    //public Boolean hidden { get; set; }
    public string editoptions { get; set; }
}

EDIT:

Here is my JS code:

$grid.jqGrid({
    colNames: selectedItems,
    colModel: columnSelected,
    sortname: selectedValues[0],
    sortorder: "asc",
    editurl: 'url',
    cellsubmit: 'clientArray',
    cellEdit: true,
    rowNum: 5000,
    rownumbers: true,
    rownumWidth: 30,
    autowidth: true,
    shrinkToFit: true,
    gridview: true,
    pager: '#gridPager',
    viewrecords: true,
    recordtext: "Total Rows: {2}",
    jsonReader: {
        root: "rows",
        page: "page",
        total: "totalpages",
        records: "totalrecords",
        cell: "cell",
        id: selectedValues[0], //index of the column with the PK in it 
        userdata: "userdata",
        repeatitems: true
    },
    prmNames: {
        rows: "numRows",
        page: "page",
        sort: "sortField",
        order: "sortOrder"
    },
    datatype: function (postdata) {
        if (lastSortField != postdata.sortField || lastSortOrder != postdata.sortOrder)
         {   if (!$('#btnValidate').is(':disabled')) {
                lastSortField = postdata.sortField;
                lastSortOrder = postdata.sortOrder;
            }
        }
    }

This is how I get value in columnModel:

function getSelectedColumnsJSON(selectedValues) {
try {
    $.ajax({
        type: "POST",
        url: window.location.protocol + '//' + window.location.host + window.location.pathname + "/getSelectedColumnsJSON",
        data: $.toJSON({
            selectedItems: selectedValues
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function (data, status) {
            if (data.d)
                columnSelected = data.d;
        },
        error: function (error) {
            ShowMessage(error.responseText);
        }
    });
}
catch (ex) {
    ShowMessage(ex.message);
}

}

I am getting the dropdown select in the column, but it is empty, I have tried to follow the format that is explained here..any help?

Answer 1

I am not sure that I understand correctly your problem because you don’t posted the JSON data which you use to fill the grid. Do you post DepartmentID or DepartmentName values in the input data? Probably you need to use formatter:’select’ additionally and it will solve your existing problem?

I don’t understand the full scenario which you need to implement, but It’s typically better to use dataUrl instead of usage of value property of editoptions. Probably the only case when you really have to use value property is the usage of formatter:'select'. Only if the data returned from the server contains ids instead of string data the option dataUrl can’t be used.