1. Home
  2. Forum
  3. jQuery
  4. Binded Grid Dropdown Option

Binded Grid Dropdown Option

Hi Team,

I have a batch edit grid with one of the columns having a dropdown edit type.  I have no problem with the dropdown options if they are already defined.

var Units = [{text: "CASE", value: "CASE"},{text: "BOX", value: "BOX"}, ]
{ field: "Unit", headerText: "Unit", width: 100, editType: ej.Grid.EditingType.Dropdown, dataSource: Units },


How do I bind dropdown options that are dynamic upon the value of  another column, ItemNo? I can't get the dropdown to bind with the results. I am using  ej.web.add.min.js Version 13.2.0.29.
My cell edit event is like below:

columns: [
          { field: "ItemNo", headerText: "Item No.", width: 150 },
          { field: "Unit", headerText: "Unit", width: 100, editType: ej.Grid.EditingType.Dropdown, dataSource: [] },
],
cellEdit: function (args) {
            var itemNo = args.rowData.ItemNo
            var vfield = args.columnObject.field;
            var vEditType = args.columnObject.editType;

            if (vEditType == "dropdownedit") {
                var grid = this._id;
                $.ajax({
                        url: "../Home/Data",
                        data: "&itemNo=" + itemNo,
                        type: 'GET',
                        success: function (results) {

                                 var dummyResults= [
                                        { text: "EACH", value: "EACH" },
                                        { text: "BAG", value: "BAG" },
                                        { text: "BOTTLE", value: "BOTTLE" },
                                   ];           

                                   /*Dropdown binding -- not working*/
                                 $("#" + grid + vfield).ejDropDownList({
                                         dataSource: dummyResults,
                                         fields: { key: "text", text: "value" }
                                  });

                                 /*I also tried binding dropdown option using this but also not working*/
                                // args.columnObject.dataSource = dummyResults;
                         }
              });

              
             }
}


Thanks.



3 Replies
IR Isuriya Rajan Syncfusion Team July 29, 2016 01:06 PM UTC

Hi Lory, 
 
Thanks for contacting Syncfusion support, 
 
We have validate your provided code and we cannot access DropdownList properties when click cellEdit event because it created . So we have achieved your requirement by using the editTemplate property.In editTemplate write() we have bind the shipCountry dataSource to customerID  dropdown columnSo we suggest to use editTemplate .  
 
Please refer the below code snippet: 
 
  $("#Grid").ejGrid({ 
            dataSource: window.gridData, 
            allowPaging: true, 
             
            columns:[ 
          { 
            field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true}, 
            editTemplate: {                              
                create: function () { 
                    return "<input>"; 
                }, 
                read: function (args) { 
                    return args.ejDropDownList("getValue");  
                }, 
                write: function (args) {//Get ShipCountry column dataSource and bind to the drop down customerID column 
                    var data = ej.DataManager(window.gridData).executeLocal(new ej.Query().select("ShipCountry")); 
                    args.element.ejDropDownList({dataSource: data });  
                    args.element.ejDropDownList("setSelectedText", args.rowdata.ShipCountry); 
                } 
            }, width: 90 
        }, 
                        { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, width: 90 }, 
                        { field: "ShipCountry", headerText: 'Ship Country', width: 90, } 
          ] 
       }); 
 
Please refer the below attached sample  and documentation link: 



This is not meet your requirement , Please share the detail about your requirement.  
Regards, 
Isuriya R. 


LO Lory August 1, 2016 07:39 PM UTC

Follow up question, how do I get the selected value and record of the dropdown? For other columns using args.value seems to work but when using the editTemplate the value that's return is undefined.

 columns: [
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },
                        {
                            field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true},
                            editTemplate: {
                              
                               create: function () {
                                    return "<input>";
                                },
                                read: function (args) {
return args.ejDropDownList("getValue"); 
                                },
                                write: function (args) {
                                    var data = ej.DataManager(window.gridData).executeLocal(new ej.Query().select("ShipCountry"));
                                    args.element.ejDropDownList({dataSource: data }); 
                                    args.element.ejDropDownList("setSelectedText", args.rowdata.ShipCountry);
                                }
                            }, width: 90
                        },
                        { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, width: 90 },  
                        { field: "ShipCountry", headerText: 'Ship Country', width: 90, }
                ],
              cellSave: function(args){
                if(args.columnName == "CustomerID"){
                         alert(args.value);
                }

KK Karthick Kuppusamy Syncfusion Team August 2, 2016 09:48 AM UTC

Hi Lory, 

We have checked the reported issue at our end and we are able to reproduce the issue in version(14.1.0.46).We have already fixed the issue internally and we have included the fix in next version(14.2.0.26). 

So, please upgrade to our latest version to overcome the issue. 
The latest version(14.2.0.28) can be downloaded from the following location. 

Please find the JS playground link for your reference. 

Regards, 
K.Karthick. 


Loader.
Up arrow icon