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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Register drop down event in default edit/add dialog.

Thread ID:

Created:

Updated:

Platform:

Replies:

144116 Apr 19,2019 07:11 AM UTC Apr 23,2019 10:41 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
derekb
Asked On April 19, 2019 07:11 AM UTC

Hello,

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.

Thanks,
Derek B

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 
 
[index.cshtml] 
@{ 
   var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() 
    { 
        Change = "Changed", 
 
    }; 
} 
 
<div> 
    <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-columns> 
            <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> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
        function Changed(args) { 
            console.log(args); 
        } 
 
</script> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 
 


derekb
Replied On 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.

Thanks,
Derek B

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 
 
Regards, 
Pavithra S. 
  


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon