Binded Grid Dropdown Option

[Lory]

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]

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: 

Sample: http://jsplayground.syncfusion.com/4rhy4ii1 

Documentation link: http://help.syncfusion.com/js/grid/editing#cell-edit-template 

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

Regards, 

Isuriya R. 

[Lory]

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]

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. 

Link: https://www.syncfusion.com/forums/125204/essential-studio-2016-volume-2-service-pack-release-v14-2-0-28-available-for-download 

Please find the JS playground link for your reference. 

http://jsplayground.syncfusion.com/zmuxzk41. 

Regards, 

K.Karthick.