How to use dropdown list in Datatable in Inline editing

Question

I am using datatable 1.8 its amazing, I have recently read an article regarding inline editing of datatable column, Inline editing , in this article on clicking on edit hype

Answer 1

Within my datatable js code:

    function editRow(oTable, nRow) {
        //comes from Razor
        var model = new Object();
        model = insuranceCompanies;

        var aData = oTable.fnGetData(nRow);
        var jqTds = $('>td', nRow);
        jqTds[0].innerHTML = '<input type="text" name="CompanyId" class="form-control input-small" value="' + aData[0] + '">';
        jqTds[1].innerHTML = '<select name="Description"></select>';
        for (i = 0; i < model.length; i++) {
            $('#Description').append('<option value=' + model[i].CompanyId + '>' + model[i].CompanyName + '</option>');
        }
        jqTds[2].innerHTML = '<input type="text" name="PolicyNumber" class="form-control input-small" value="' + aData[2] + '">';
        jqTds[3].innerHTML = '<input type="text" name="Action" class="form-control input-small" value="' + aData[3] + '">';
        jqTds[4].innerHTML = '<a class="edit btn-sm btn-primary" href="">Save</a>';
        jqTds[5].innerHTML = '<a class="cancel btn-sm btn-default" href="">Cancel</a>';
    }

On my View:

@section scripts
<script type="text/javascript">
   var app_base = '@Url.Content("~/")';
   var insuranceCompanies = @Html.Raw(Json.Encode(Model.InsuranceCompanies));
</script>
   @Scripts.Render("~/ScriptsWithDataTables")
   @Scripts.Render("~/Scripts/customajax/patient.insurancecompany.js")
End Section

Answer 2

There is a way to obtain a JSON array for filling a dropdown list in the moment when you make a click to "edit" link, that way is get your JSON through "complete" rather "success" attribute of your AJAX call inside "fnServerData" like this:

"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
                    oSettings.jqXHR = $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": "opcionesMenu=ini",
                        "success": fnCallback,
                        "complete": function(resp) {
                                jsonSelects = JSON.parse(resp.responseText);
                        }
                    });
                }

In my example "jsonSelects" is a global variable where I can obtain my JSON everywhere inside my code, then I will use my JSON to fill a dropdown list when editing like this:

function editRow(oTable, nRow)
        {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);

            //Dropdown list
            jqTds[2].innerHTML = '<select id="selMenu"></select>';                    
                for(i = 0; i < jsonSelects.menu.length; i++) {
                      $('#selMenu').append('<option value=' + jsonSelects.menu[i].cod_elemento + '>' + jsonSelects.menu[i].nombre_elemento + '</option>');
                }

                //Dropdown list
                jqTds[3].innerHTML = '<select id="selIdioma"></select>';                    
                for(i = 0; i < jsonSelects.idioma.length; i++) {
                      $('#selIdioma').append('<option value=' + jsonSelects.idioma[i].codigo_idioma + '>' + jsonSelects.idioma[i].nombre_idioma + '</option>');
                }
                // Input text
                jqTds[4].innerHTML = '<input value="' + aData["opcion"] + '" type="text">';

When you click in the "edit" link you will get a dropdown list in the fields that you wanted.