Dropdown list in editable table posts the index and not the text selected

cmiller

I have a list of state abbreviations in a dropdownlist bound to a column in an MakeEditable datatable. When the state is selected and the user moves off of the cell, a post is made to a method on the server. The problem is when the post is made, the value is always the index of the selected item in the list and not the state abbreviation. Does anyone anyone see what I am doing wrong?


[code]
var oTable = $('#myTable').dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "@Url.Content("~/Content/DataTables-1.9.4/extras/TableTools/media/swf/")" + "copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["xls"]
}
]
},
"bPaginate": true,
bJQueryUI: true,
"sScrollY": "300px",
"sScrollX": "300%",
"sScrollXInner": "300%",
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"bFilter": true,
"oLanguage": {
"sZeroRecords": "No records match the selected criteria"
},
"bSortClasses": false,
"bSort": true
}).makeEditable({
sUpdateURL: '@Url.Action("UpdateData","Report")',
"aoColumnDefs": [
{ "aTargets": [3], "sClass": "highlightColumn" },
{ "aTargets": [4], "sClass": "highlightColumn" }
],
aoColumns: [null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
{
"onblur": "submit", "placeholder": "",
oValidationOptions: { rules: {value: { maxlength: 200}}},
callback: function (value, settings) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(value, aPos[0], aPos[1]);
}
}
,
{
"onblur": "submit", "placeholder": "",
oValidationOptions: { rules: { value: { maxlength: 50 } } },
callback: function (value, settings) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(value, aPos[0], aPos[1]);
}
},
{ //State
"onblur": "submit", "placeholder": "",
oValidationOptions: { rules: { value: { maxlength: 2 } } },
data: stateData.value,
type: "select",
callback: function (value, settings) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(value, aPos[0], aPos[1]);
}
},
{
"onblur": "submit", "placeholder": "",
oValidationOptions: { rules: { value: { maxlength: 10 } } },
callback: function (value, settings) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(value, aPos[0], aPos[1]);
}
},
{ //email
"onblur": "submit", "placeholder": "",
cssclass: "email",
oValidationOptions: { rules: { value: { maxlength: 250 } } },
callback: function (value, settings) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(value, aPos[0], aPos[1]);
}
},
null
,
{ //CellPhone
"onblur": "submit", "placeholder": "",
oValidationOptions: { rules: { value: { maxlength: 50 } } },
callback: function (value, settings) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(value, aPos[0], aPos[1]);
}
},
null,
null,
null,
null,
null
]
});
[/code]

cmiller

The problem was that I was returning the list of states in the this format:
[["AL"],["AK"],["AZ"],["AR"],["CA"],["CO"],["CT"]]

I needed it in this format:
{"AL":"AL","AK":"AK","AZ":"AZ","AR":"AR","CA":"CA","CO":"CO","CT":"CT"}

I changed the controller method to return the state abbreviation as a two-dimensional array
var states = stateList.Select(f => new[] { f.StateAbbv.ToString(), f.StateAbbv.ToString() });

I then wrote a function to replace some characters to achieve the needed format.