jqgrid Edittype: select not saving value from dataurl

Question

I have searched many forumns and posts and I still cannot get the edittype: select with the editoptions: dataurl to work.

When the grid is populated the data loads loads just fine. When I click on the edit button the drop down lists have the correct values and names. When I click save I get an error stating that one of the parameters is missing. It doesn't appear that it is pulling the value of the selected option.

I have tried the formatter: 'select' option but when I use that nothing shows up in those columns when the grid is loaded.

Here is what I have for code.

var buildSelectFromJson = function (data) {
    var html = '<select>', d = data.d, length = d.length, i = 0, item;
    for (; i < length; i++) {
        item = d[i];
        html += '<option value=' + item.id + '>' + item.value + '</option>';
    }
    html += '</select>';
    return html;
};

$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" },
    recreateForm: true,
    serializeEditData: function (postData) {
        return JSON.stringify(postData);
    }
});

jQuery("#usage").jqGrid({
    url: '/vochaptracker/Services/vochapService.asmx/GetUsage',
    datatype: 'json',
    mtype: 'post',
    loadonce: true,
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        return JSON.stringify(postData);
    },
    jsonReader: {
        root: function (obj) { return obj.d.rows; },
        page: function (obj) { return obj.d.page; },
        total: function (obj) { return obj.d.total; },
        records: function (obj) { return obj.d.records; }
    },
    colNames: ['Date', 'Paint', 'Booth', 'Gallons Used'],
    colModel: [
        { name: 'date', index: 'date', width: 75, editable: true },
        { name: 'paint', index: 'paint', width: 300, editable: true, edittype: 'select', formatter:'select', editoptions: { dataUrl: "/vochaptracker/Services/vochapService.asmx/GetPaintsForEdit",
            buildSelect: buildSelectFromJson}
        },
        { name: 'booth', index: 'booth', width: 100, editable: true, edittype: 'select', formatter:'select', editoptions: { dataUrl: "/vochaptracker/Services/vochapService.asmx/GetBoothsForEdit",
            buildSelect: buildSelectFromJson}},
        { name: 'gallonsUsed', index: 'gallonsUsed', width: 100, editable: true }
    ],
    rowNum: 20,
    rowList: [20, 30, 40],
    pager: '#pager4',
    sortname: 'ID',
    viewrecords: true,
    sortorder: "desc",
    caption: "Daily Usage",
    height: '400',
    editurl: '/vochaptracker/Services/vochapService.asmx/EditUsage',
    ajaxSelectOptions: { contentType: "application/json", dataType: 'json', type:  "POST" }
});
jQuery("#usage").jqGrid('navGrid', "#pager4", { edit: false, add: false, del: true });
jQuery("#usage").jqGrid('inlineNav', "#pager4");

Web Service:

public class jqGridPaintHelper
{
    public string total;
    public string page;
    public string records;
    public List<TableRow> rows;
}

public class TableRow
{
    public string id;
    public List<string> cell;
}

public class editHelper
{
    public string id;
    public string value;
}

    [WebMethod]
    [ScriptMethod( ResponseFormat = ResponseFormat.Json )]
    public jqGridPaintHelper GetUsage( int page, int rows, string sidx, string sord )
    {
        vochapdbDataContext db = new vochapdbDataContext();
        jqGridPaintHelper helper = new jqGridPaintHelper();
        int dbCount = db.DailyUsages.Count();
        helper.total = ( ( dbCount + rows - 1 ) / rows ).ToString();
        helper.page = page.ToString();
        helper.records = dbCount.ToString();

        List<TableRow> usage = new List<TableRow>( dbCount );
        foreach ( DailyUsage row in db.DailyUsages )
        {
            usage.Add( new TableRow()
            {
                id = row.ID.ToString(),
                cell = new List<string> {
                    row.date.ToShortDateString(),
                    row.Paint.paintName.ToString(),
                    row.Booth.tag.ToString(),
                    row.gallonsUsed.ToString()
                }
            } );
        }

        helper.rows = usage;

        return helper;
    }

    [WebMethod]
    [ScriptMethod( ResponseFormat = ResponseFormat.Json )]
    public int EditUsage( string ID, string date, string paintID, string boothID, string gallonsUsed, string oper, string id )
    {
        vochapdbDataContext db = new vochapdbDataContext();

        if ( oper == "edit" )
        {
            db.updateUsage( int.Parse( ID ), DateTime.Parse( date ), paintID, int.Parse( boothID ), decimal.Parse( gallonsUsed ) );
        }
        else if ( oper == "add" )
        {
            DailyUsage newUsage = new DailyUsage();
            newUsage.date = DateTime.Parse( date );
            newUsage.paintID = paintID;
            newUsage.boothID = int.Parse( paintID );
            newUsage.gallonsUsed = decimal.Parse( gallonsUsed );

            db.DailyUsages.InsertOnSubmit( newUsage );
            db.SubmitChanges();
        }
        else if ( oper == "del" )
        {
            db.deleteUsage( int.Parse( id ) );
        }

        return 1;
    }

    [WebMethod]
    [ScriptMethod( ResponseFormat = ResponseFormat.Json )]
    public List<editHelper> GetPaintsForEdit()
    {
        vochapdbDataContext db = new vochapdbDataContext();

        List<editHelper> paints = new List<editHelper>();

        foreach ( Paint row in db.Paints )
        {
            paints.Add( new editHelper() { id = row.ID, value = row.paintName } );
        }

        return paints;
    }

    [WebMethod]
    [ScriptMethod( ResponseFormat = ResponseFormat.Json )]
    public List<editHelper> GetBoothsForEdit()
    {
        vochapdbDataContext db = new vochapdbDataContext();

        List<editHelper> booths = new List<editHelper>();

        foreach ( Booth row in db.Booths )
        {
            booths.Add( new editHelper() { id = row.ID.ToString(), value = row.tag } );
        }

        return booths;
    }

This is the error I get when I try to save a row after editing:

System.InvalidOperationException: Missing parameter: paintID.
at System.Web.Services.Protocols.ValueCollectionParameterReader.Read(NameValueCollection collection)
at System.Web.Services.Protocols.HtmlFormParameterReader.Read(HttpRequest request)
at System.Web.Services.Protocols.HttpServerProtocol.ReadParameters()
at System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()

Any help is greatly appreciated. I have been stuck for about a month now.

Answer 1

I finally figured it out. I had some weird values in my dropdown select list.

I added " around the values and it fixed the problem.

Old:

html += '<option value=' + item.id + '>' + item.value + '</option>';

New:

html += '<option value="' + item.id + '">' + item.value + '</option>';