Jquery Data Table ? editing...

See more:

jQuery

DataTable

MVC4

Hi friends

When i edit a Jquery Datatable , where there is a column which i created by selecting from dropdownlist and so now on time of editing i need to display dropdownlist with values in it so i can choose and press enter .

I been using JQUERY DATATABLES plugin & jeditable plugin and so on . The data in dropdown will be from DB .
I tried to do by fallowing article from code project but i am doing dynamically .
My link : ASP.NET MVC Editable Table (jQuery DataTables and ASP.NET MVC integration - Part II)[^]

So how i can bind a dropdown in place of textbox which is coming by default ?

My code :

            $(document).ready(function () {
                $('#myDataTable').dataTable({
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bProcessing": true,
                    //"bServerSide": true,
                    "aoColumns": [

                         {
                             "sName": "Lead_Id",
                             "bSearchable": false,
                             "bSortable": false,
                             "fnRender": function (oObj) {

     return '<a href="\"Home\\LeadWizardView\\'" mode="hold" />                                 }
                         },
                         { "sName": "Contact_Name" },
                         { "sName": "Contact_Address" },
                         { "sName": "Lead_Source" },
                         { "sName": "Domain" }
    },
  null, //null for read-only columns
                    {
                        indicator: 'Saving...',
                        tooltip: 'Click to select town', // think this as address
                        loadtext: 'loading...',
                        type: 'select',
                        onblur: 'submit',
                        data: "{'London':'London','Liverpool':'Liverpool','Portsmouth':'Portsmouth'}" // here it is static data which gives me on drop-down when i click on column . how to do it dynamically
                    }
                }).makeEditable({
                    sUpdateURL: "/Home/UpdateData",
                    sAddURL: "/Home/AddData",
                    sDeleteURL: "/Home/DeleteData",


                    sAddNewRowFormId: "formAddNewLead",
                    sAddNewRowButtonId: "btnAddNewLead",
                    sAddNewRowOkButtonId: "btnAddNewLeadOk",
                    sAddNewRowCancelButtonId: "btnAddNewLeadCancel",
                    sDeleteRowButtonId: "btnDeleteLead",
            });
        </script>
}

<div id="demo">
<h2>Customization</h2>

<table id="myDataTable" class="display">
                    <thead>
                   <tr>
                       <th>Details</th>
                       <th>Contact Person</th>
                       <th>Contact Address</th>
                       <th>Lead Source</th>
                       <th>Domain</th>
                   </tr>
 </thead>
 <tbody>
                   @foreach (var item in Model.Lead_complete_list)
                   {
                     <tr id="@item.Lead_Id">
                         <td>@item.Lead_Id</td>
                           <td>@item.Contact_Name</td>
                           <td>@item.Contact_Address</td>
                           <td>@item.Lead_Source</td>
                           <td>@item.Domain</td>

                       </tr>
                   }
</tbody>
                </table>
  </div>