We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binded Grid Dropdown Option

Thread ID:

Created:

Updated:

Platform:

Replies:

125195 Jul 28,2016 09:28 PM UTC Aug 2,2016 09:48 AM UTC JavaScript 3
loading
Tags: ejGrid
Lory
Asked On July 28, 2016 09:28 PM UTC

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.



Isuriya Rajan [Syncfusion]
Replied On 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. 


Lory
Replied On 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);
                }

Karthick Kuppusamy [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;