Hi
I had a specific question on whether it is possible for the editor plugin and the Datatables source to 'Share' a data source
Scenario-
There is a datatable with a number of text and dropdown fields,all of which need to be edited, validated, and submitted by the user.
Requirements -
a) Would like to use Editor plugin to achieve this functionality.
b) All DT contents need to be validated before postback.
c) Drop-downs should default to currently selected values from database
d) On the editor popup/interface, need to link contents of drop down to another field e.g. when selecting product name from drop down for e.g., a read-only text box should be populated with the product code
Approach so far -
DT has been implemented with JSON object source array from a MVC view model.
Drop downs and display of selected value working fine - (Data source is the 'manufdata' JSON array shown below)
(is this correct?)
I am using the DT documentation from http://editor.datatables.net/release/DataTables/extras/Editor/examples/fieldTypes.html
and this post http://datatables.net/forums/discussion/10742/datatables-editor-populate-foreign-key-of-table-using-a-drop-down-of-values./p1 as the starting point for my work.
So...
Sample JSON object data returned via Ajax call is:
Array Logic to parse and populate an array of Product items from above is:
Editor set up to bind to productListItems:
Data table set up that binds to productListItems:
Questions/Issues -
a) DT Select item does not bind with the error above
b) Drop down on the Editor plugin shows the items however I am not sure how to get this to show the default value.
I've tried to recreate this at http://live.datatables.net/unator/14, however cannot get this to work, due to more errors e.g.
"Line 46: productListItems[j]["label"] = manufdata[i].ProductDDList[j].ProductName; --- ['label'] is better written in dot notation." ???
Obviously I am getting something very wrong in doing this, however cannot figure out where as I think I have followed the documentation...
Was hoping for some guidance on this.
Lastly, how do I default the drop down to the returned value from the database in the editor plugin (and there-fore in the Data table)
Also I need to link an item on the Editor popup on selection of an item on the DD, e.g. when selecting product, a product code field is populated
that can be parsed and posted back to the database
--Update:
I think I know why the DT does not bind - the mdata attribute does not exist in the source i.e. "ProductDDlist".
but when I use this source, I still don't get the correct output, possibly because ProductDDlist is not in the correct format.
Possibly making the wrong assumptions here or making some really fundamental mistake...
Thanks
kG
I had a specific question on whether it is possible for the editor plugin and the Datatables source to 'Share' a data source
Scenario-
There is a datatable with a number of text and dropdown fields,all of which need to be edited, validated, and submitted by the user.
Requirements -
a) Would like to use Editor plugin to achieve this functionality.
b) All DT contents need to be validated before postback.
c) Drop-downs should default to currently selected values from database
d) On the editor popup/interface, need to link contents of drop down to another field e.g. when selecting product name from drop down for e.g., a read-only text box should be populated with the product code
Approach so far -
DT has been implemented with JSON object source array from a MVC view model.
Drop downs and display of selected value working fine - (Data source is the 'manufdata' JSON array shown below)
{"mData": "ProductDDList","aTargets": [3]},"mRender": function ( data, type, full ) { var returnValue="<select class='ddProductList'>"; var listItems= ""; for (var i = 0; i < data.length; i++){ if(data[i].ProductId==full.SelectedProductId){ listItems+= "<option value='" + data[i].ProductId + "'"+" selected='selected'"+">" + data[i].ProductName + "</option>"; }else{ listItems+= "<option value='" + data[i].ProductId + "'>" + data[i].ProductName + "</option>"; } } return returnValue.concat(listItems,"</select>"); } },As per my reading of the documentation and several posts on this site, it seems in order to implement dropdowns on the editor popup (from the database) we have to fetch the contents using a Ajax call and then bind to the Editor Field using "ipOpts" and the DT field using "mdata".
(is this correct?)
I am using the DT documentation from http://editor.datatables.net/release/DataTables/extras/Editor/examples/fieldTypes.html
and this post http://datatables.net/forums/discussion/10742/datatables-editor-populate-foreign-key-of-table-using-a-drop-down-of-values./p1 as the starting point for my work.
So...
Sample JSON object data returned via Ajax call is:
var manufdata = [ { "SurveyDataRecordId": "604", "ProductVolume": "150.0000", "ProductCode": "ABC.PQR.FRC.004", "ProductDDList": [ { "ProductId": "122", "ProductName": "Corn Chips" }, { "ProductId": "446", "ProductName": "Chilli Chips" } ], "SelectedProductId": "446" }]
Array Logic to parse and populate an array of Product items from above is:
var productListItems = []; for (var i = 0; i < manufdata.length; i++) { for (var j = 0; j<manufdata[i].ProductDDList.length; j++){ productListItems[j] = {}; productListItems[j]["label"] = manufdata[i].ProductDDList[j].ProductName; productListItems[j]["value"] = manufdata[i].ProductDDList[j].ProductId;; } }
Editor set up to bind to productListItems:
"fields": [ { "label": "Product:", "name": "ProductList", "type": "select", "ipOpts": productListItems },
Data table set up that binds to productListItems:
"aoColumnDefs": [ { "mData": "ProductList","aTargets": [3]} // this returns the DataTables warning (table id = 'dTChildDataRows'): //Requested unknown parameter 'ProductList' for.....error ]
Questions/Issues -
a) DT Select item does not bind with the error above
b) Drop down on the Editor plugin shows the items however I am not sure how to get this to show the default value.
I've tried to recreate this at http://live.datatables.net/unator/14, however cannot get this to work, due to more errors e.g.
"Line 46: productListItems[j]["label"] = manufdata[i].ProductDDList[j].ProductName; --- ['label'] is better written in dot notation." ???
Obviously I am getting something very wrong in doing this, however cannot figure out where as I think I have followed the documentation...
Was hoping for some guidance on this.
Lastly, how do I default the drop down to the returned value from the database in the editor plugin (and there-fore in the Data table)
Also I need to link an item on the Editor popup on selection of an item on the DD, e.g. when selecting product, a product code field is populated
that can be parsed and posted back to the database
--Update:
I think I know why the DT does not bind - the mdata attribute does not exist in the source i.e. "ProductDDlist".
but when I use this source, I still don't get the correct output, possibly because ProductDDlist is not in the correct format.
Possibly making the wrong assumptions here or making some really fundamental mistake...
Thanks
kG