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. Image for the cookie policy date

Register drop down event in default edit/add dialog.


How can I register an event handler for a drop-down in the grid's add/edit dialog box? I do NOT want to use a template.

Derek B

3 Replies

PS Pavithra Subramaniyam Syncfusion Team April 22, 2019 06:57 AM UTC

Hi Derek, 
Thanks for contacting Syncfusion support. 
You can add the event handler for DropDownEdit component present in the edit Dialog by using the “column.edit.params” property. Please refer to the below code example and documentation link for more information. 
   var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() 
        Change = "Changed", 
    <ejs-grid id="Grid" dataSource="ViewBag.data" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" newRowPosition="Top"></e-grid-editSettings> 
        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 
            <e-grid-column field="OrderID"  headerText="Order ID" isPrimaryKey="true" width="140"></e-grid-column> 
            <e-grid-column field="CustomerID" editType="dropdownedit" edit="@(new {@params = DropDownList})" headerText="Customer Name" width="150"></e-grid-column> 
        function Changed(args) { 
Please get back to us if you need further assistance. 
Pavithra S. 

DE derekb April 22, 2019 10:00 PM UTC

Hi Pavithra,

That worked, thank you.

I have another question...

What I've done so far is bind a foreign key to a dropdown list, using the "ForeignKeyValue" and "ForeignKeyField" properties on the grid columns. The drop down works perfectly.

However, what I would like to do is have various other read-only input fields on the add/edit dialog be populated whenever a new dropdown value is selected by the user. I understand that I can do this from Javascript by binding a change event to the dropdown list, as you just described, but I would like it to be more automatic if possible. Is there a way I can easily "link" certain grid columns to properties in the datasource? The properties in the dropdown's datasource have the same name as the read-only properties I want to populate in the dialog.

Derek B

PS Pavithra Subramaniyam Syncfusion Team April 23, 2019 10:41 AM UTC

Hi Derek , 
We are happy to hear that your issue has been resolved. You can achieve your requirement simply in the change event of dropDownList by using the below way. So it will update the value in both editform and database. Please find the below code snippet. 
   function Changed(args) { 
        if (typeof args != 'undefined') { 
            data = args.itemData; 
            if (typeof data != 'undefined') { 
                var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
                var cols = grid.columns;   //getting the grid columns 
                for (var i = 0; i < cols.length; i++) { 
                    if (cols[i].field === 'OrderID' && cols[i].allowEditing) {   //checking the field whether read only or not 
                        document.querySelector("#" + grid.element.id + cols[i].field).value = 10; 
                    if (cols[i].field === 'CustomerID' && cols[i].allowEditing) { 
                        document.querySelector("#" + grid.element.id + cols[i].field).value = "Updated"; 
                    if (cols[i].field === 'Freight' && cols[i].allowEditing) { 
                        document.querySelector("#" + grid.element.id + cols[i].field).value = 45.67; 
Please get back to us if you need further assistance on this. 
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon