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 hyperlink the datatable columns becomes text field but my requirement is that i have to show a dropdown list, means on clicking on edit hyperlink it should get converted into dropdown list and should come from my database database, and on saving its values get stored into database. How to do this?

Any help would be of great help for me

Solution 1

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.

Solution 2

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