Register drop down event in default edit/add dialog.

[derekb]

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]

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> 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-type-and-its-params 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S. 

 

[derekb]

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]

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.