Click here to Skip to main content
14,690,512 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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>
Posted
Updated 8-Apr-14 8:33am
v4

1 solution

When creating the dropdown you are using Data ="bla..bla.."

Instead you should use loadurl: 'yourmethod which returs json data'

quick example below..

***JAVA script ***

<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        $('#myDataTable').dataTable({ "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": 'AjaxDataProvider',
            "aoColumns": [
                                    { "sName": "ID",
                                        "bSearchable": false,
                                        "bSortable": false,
                                        "bVisible": false

                                    },
			                        { "sName": "COMPANY_NAME" },
			                        { "sName": "ADDRESS" },
			                        { "sName": "TOWN" }
            ]

        }).makeEditable({

            "aoColumns": [{}, null,  {
                indicator: 'Saving...',
                tooltip: 'Click to select town',
                loadtext: 'loading...',
                type: 'select',
                onblur: 'submit',
                loadurl: 'AjaxDataProvider1'
                //data: "{'London':'London','Liverpool':'Liverpool','Portsmouth':'Portsmouth','Edinburgh':'Edinburgh', 'Blackburn':'Blackburn','Kent':'Kent','Essex':'Essex','Oxon':'Oxon','Lothian':'Lothian','West Sussex':'West Sussex','Lanarkshire':'Lanarkshire','Birmingham':'Birmingham','East Sussex':'East Sussex','Surrey':'Surrey'}"
            }]
        });
    });
        
        </script>
}



*** Method in your controller ***

public ActionResult AjaxDataProvider1(JQueryDataTableParamModel param)
{
    List<string> people = new List<string>{
                "London"    ,
                "Liverpool" ,
                "Portsmouth"    ,
                "Edinburgh" ,
                "Blackburn" ,
                "Kent"  ,
                "Essex" ,
                "Oxon"  ,
                "Lothian"   ,
                "West Sussex"   ,
                "Lanarkshire"   ,
                "Birmingham"    ,
                "East Sussex"   ,
                "Surrey"

           };
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    var pp = serializer.Serialize(people);
    return this.Json(pp
        , JsonRequestBehavior.AllowGet);
}</string></string>
   
Comments
sunil gutta 10-Apr-14 1:59am
   
awesome bro . You deserve a applause :) Thank you . Well small query i.e
loadurl: 'AjaxDataProvider1' but if i have multiple controllers then i should mention like this ha ? 'home/AjaxDataProvider1' . .
Guruprasad.K.Basavaraju 10-Apr-14 10:41am
   
Thats correct,

In my code both the page and the datatable are in the same controller so we dont have to specify it.
sunil gutta 10-Apr-14 15:21pm
   
oops small issue when i am selecting list from dropdown which i populated from db . While updating the selected value i.e when i select london which is 1st in list . The db is inserting 1 not the text ? is there any workaround for this . Thank you for your time & help
Guruprasad.K.Basavaraju 10-Apr-14 15:26pm
   
Sunil,

You will need to create a list with the value to insert and value to select. In my example I create a list of string which is just one value in each list element.
sunil gutta 10-Apr-14 15:34pm
   
ok mate yes you are right . i am doing so & i'm using list<selectedlistitem> xyz() --->here i will store my list and pass to json . While storing in selectedlistitem i will store text and value both same . I hope this works out :) cheers have a great day friend
Guruprasad.K.Basavaraju 10-Apr-14 16:10pm
   
That should work.. thanks and you have a good one too..
If interested in HTML and CSS, I have recently written some articles on the same.. below is the link.

http://www.codeproject.com/script/Articles/MemberArticles.aspx?amid=10705317
sunil gutta 11-Apr-14 3:35am
   
yeah sure will look and try to learn some stuff . Thanks

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900