Question

I am using jQuery datatable plugin and one of the columns is a select box. It renders fine if I assign some static values such as True/False as below.

"aoColumns": [{}, {}, {}, {},
        {
            type: 'select',
            onblur: 'submit',
            data: "{'True':'True', 'False':'False'}"
        }]

But I need to get the values of select box from a JSON object that is returned from a controller’s action method. Here is my action method. Any ideas on how to get the data populated into the select box? Thanks for any help.

public ActionResult GetAllFields(int connId)
    {
        Conn conn = GetConn(connId);
        List<string> fields = conn.GetAllFields();

        return Json(new Result()
        {
            Result = Action.Successful,
            Data = fields                    
        }, JsonRequestBehavior.AllowGet);
    }

Answer 1

I would use mRender to display the result of a function that loads/populates the content of your dropdown.

Example from datatables.net:

// Use as a function to create a link from the data source
$(document).ready( function() {
  var oTable = $('#example').dataTable( {
    "aoColumnDefs": [ {
      "aTargets": [ 0 ],
      "mData": "download_link",
      "mRender": function ( data, type, full ) {
        return '<a href="'+data+'">Download</a>';
      }
    } ]
  } );
} );

Depending on the content of your dropdown, you may also want to consider the solution user403295 posted to this question.