How to create a drop down list from a JSON object array item - Updated

kahlil312

Greetings,

I am having an issue when attempting to produce a dropdown list from a JSON object data. The JSON object is built using MVC and passed to DT via sAjaxsource call to Controller method.(pl note not using bServerSide=true, and do not want to!)

Scenario is that I have a list of records containing manufacturer product details, and each record should contain a list of products supplied by that manufacturer, with the currently selected product shown as the selected option - a reasonably simple use case I guess?

I am successfully able to retreive a list of Manufacturer details from the database as a JSON object that happily renders onto a DT when rendering text items :http://live.datatables.net/unator/12/edit#javascript,html,live. however unable to figure out how to add a DD field to this.

My starting point is to mock up the JSON as a JS variable, and then figure out how to render this as a dropdown using mRender as per advice provided to me in an earlier post.

UPDATE - ok got the rendering to work, this had to do with my incomplete understanding of mrender function params.

as below -

The correct JSON format for a DT record which also needs to contain a list of items appears to be :
(the below is an example assuming products and product lists)

{"DataRecordId":"1", "ProductVolume":"10.00", "ProductCode":"ABC.DEF.DDD.001","ProductList": [{"ProductId": "1","ProductName": "Prod1"},{"ProductId": "2","ProductName": "Prod2"}]}

This can be rendered into a DT using aoColumnDefs as follows:
[code]
"aoColumnDefs": [
{ "mData": "DataRecordId", "sName": "DataRecordId", "aTargets": [0] },
{ "mData": "ProductCode", "sName": "ProductCode", "aTargets": [1] },
{ "mData": "ProductVolume", "sName": "ProductVolume", "aTargets": [2] },
{ "mData": "ProductList","aTargets": [3],"mRender": function ( data, type, full ) {
var returnValue="";
var listItems= "";
for (var i = 0; i < data.length; i++){
listItems+= "" + data[i].ProductName + "";
}
return returnValue.concat(listItems,"");
}
},
[/code]

Possibly this might help someone new to this like myself..CAVEAT - this does work, however I do not know if this is the recommended way to achieve, would really welcome any feedback or comments on this from DT veterans.

I'll keep going with this, my next phase is to render the JSON for the Select List Items from the Database via an AJAX call, defaulting dd to selected item etc.

Thanks
kG

allan

If you want the select list in the table, then yes, that looks like a good way of doing it to me, and probably what I would have suggested. Arrays might be slightly faster that string concatenation when building the string (and use `join` ) in older IE versions, and save you a line or two, but likely not a noticeable amount if the table is relative small.

Allan