Select Field Type Binding

cbp8092

Project Details:
DataTables 1.9.4
TableTools 2.1.4
Editor 1.2.3

Experience:
Brand new to DataTables and Editor.

I'm attempting to bind or set the value from a datatable to an editor screen for a select list. Datatable displays Iowa, when I highlight a row and select edit, Editor displays text fields perfectly but state list (Select) is set to Alabama the first state. I want it to be Iowa, the value contained in the dataTable. I've been reading the available field properties and believe I need to do something with dataSourceSet but I haven't been able to find an example of its usage. Any help would be greatly appreciated.

[code]
var edit;
var remove;

$(document).ready(function () {
edit = new $.fn.dataTable.Editor({
"ajaxUrl": "Update",
"domTable": "#riskDataTable",
"idSrc": "0",
"fields": [
{
"label": "Address Line 1:",
"name": "AddressLine1",
"dataProp": "1"
}, {
"label": "Address Line 2:",
"dataProp": "2",
"name": "AddressLine2"
}, {
"label": "City:",
"dataProp": "3",
"name": "City",
}, {
"label": "State:",
"name": "State",
"dataProp": "4",
"type": "select",
"ipOpts":getStateList()

}, {
"label": "ZIP:",
"dataProp": "5",
"name": "ZIP"

}, {
"label": "Country:",
"dataProp": "6",
"name": "Country",
"type": "select"
}, {
"label": "Status:",
"dataProp": "7",
"name": "Status",
"type": "select"
}
]
});

remove = new $.fn.dataTable.Editor({
"ajaxUrl": "Remove",
"domTable": "#riskDataTable",
"idSrc": "0"
});

$('#riskDataTable').dataTable({
"sDom": "Tfrtip",
"bServerSide": true,
"sAjaxSource": "AjaxHandler",
"sPaginationType": "full_numbers",
"aoColumns" : [
{
"mData": "0"
, "bVisible": false
},
{
"mData": "1"
},
{
"mData": "2"
},
{
"mData": "3"
},
{
"mData": "4"
},
{
"mData": "5"
},
{
"mData": "6"
},
{
"mData": "7"
}
],
"oTableTools": {
"sRowSelect": "single",
"aButtons": [
{
"sExtends": "editor_edit"
, "editor": edit
},
{
"sExtends": "editor_remove"
, "editor": remove
}
]
}
});
}); //$(document).ready

function getStateList() {
var stateListOptions = $('#ID_State').children('option');
var statesArray = new Array();
$.each(stateListOptions, function (index, element) {
var lbl = element.label;
var val = element.value;
var arrayItem = { "label" : lbl, "value" : val};
statesArray.push(arrayItem);
});
return statesArray;
}
[/code]

cbp8092

I was able to figure this out. It wasn't binding because I was passing the value, "Iowa" instead of the value "15".

To get the value "15" I added a column to aaData StateID and then used that value in my select.

:-)

allan

Hi,

Great to hear you got this sorted out!

Allan