Grid event when cell value is changed to populate datasource for another column dropdownlist

Question

I have a column 'Type' that is populated as a ForeignKey list, the value of which I need to use to update the datasource of the next column 'Metric' dropdownlist, see below.

I'm using normal edit mode and need an event to fire on the end of editing that cell or being editing of Metric cell, I don't see any events in the API for this scenario, how can I achieve this?

Rahul Narayanasamy · Answer

Hi Mark, Greetings from Syncfusion. Query: Grid event when cell value is changed to populate datasource for another column dropdownlist We have validated your query and you want to populate the datasource for one dropdown column based on the selection of the another dropdown column. For this, we suggest you to use cascading dropdown list to achieve your requirement. Find the below code snippets, sample and documentation for your reference. . . . @code{ public List GridData { get; set; } public List Countries = new List() { "United States", "Australia" }; public List States = new List() { "New York", "Virginia", "Washington" }; public bool Enabled = false; . . . public void ValueChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { if (args.Value == "United States") { States = new List() { "New York", "Virginia", "Washington" }; } else if (args.Value == "Australia") { States = new List() { "Queensland", "Tasmania", "Victoria" }; } Enabled = true; } public void OnActionBegin(ActionEventArgs args) { Enabled = false; } . . . } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1720476722 Reference: https://blazor.syncfusion.com/documentation/datagrid/how-to/cascading-dropdownlist-with-grid-editing/ Please get back to us if you need further assistance. Regards, Rahul

Mark Barton · Answer

Hi RahulThat sort of solves one problem, however I now see another issue when clicking on a row to edit, all the dropdowns lose their values. This happens also on the example you provide below, how can the values be retained?ThanksMark

Rahul Narayanasamy · Answer

Hi Mark, Thanks for the update. We are happy to hear that you have achieved the requirement. Query: however I now see another issue when clicking on a row to edit, all the dropdowns lose their values We have validated your query and you want to maintain the particular dropdown values while start editing. You can achieve this requirement by using Value property of DropDownList. Find the below code snippets and sample for your reference. . . . Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SampleGrid-1665336659 Note: In this above example, ShipCountry value is show while start editing. The value of the ShipState coumn is shown only if it matches the ShipCountry column(because the DataSource is based on ShipCountry column). Please get back to us if you need further assistance. Regards, Rahul

Dallas Kostna · Answer

I've created the following grid (in Blazor Server mode): In the code, I have the following: private void SKUChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { lastSKU = args.ItemData.SKU; this.SKUColorQuery = new Query().Where(new WhereFilter() { Field = "ItemID", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false }); }When I run this, if I change a SKU, the SKU Color column doesn't update right away. I need to exit edit mode and go back in - then the query works. What I am doing wrong here? Thanks!

Rahul Narayanasamy · Answer

Hi Dallas, Greetings from Syncfusion. We have validated your query and we might suspect that you have faced the problem while updating the edited dropdown values(updated value is not updated properly in the Grid). While defining the components in EditTemplate, you need to define ID(Id value which is same as Field name of that column) property in the corresponding component. Find the below code snippets for your reference. . . . If it does not meet your requirement or if we misunderstood your requirement, then could you please share more information about your requirement. It will be helpful to validate and provide a better solution. Regards, Rahul

Dallas Kostna · Answer

Hmmm...that didn't seem to help.As before, the data in the second dropdown loads once the first is selected - however, I need to change the first column, update and then edit again in order to see the correct set of values in the second column.Curiously, I tried downloading the sample above and it works perfectly - UNTIL I update the components to the latest version (which my project uses)...then it stop working.

Rahul Narayanasamy · Answer

Hi Dallas, Thanks for the update. We have validated your query with the provided information. We suggest you to add the below codes in your application to achieve this requirement in our latest versions. We have also prepared a sample by using the shared codes in our latest version 18.3.0.42. . . . @code{ SfGrid Grid; public List GridData { get; set; } = new List(); . . . public bool Enabled { get; set; } . . . public void OnActionBegin(ActionEventArgs args) { if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) { Enabled = false; Grid.PreventRender(false); } } public void ActionCompletedHandler(ActionEventArgs args) { if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) { Grid.PreventRender(false); } } } Sample: https://www.syncfusion.com/downloads/support/forum/153420/ze/BlazorApp1-781227645 Please let us know if you have any concerns. Regards, Rahul

Dallas Kostna · Answer

Awesome - works perfectly - thanks so much!

Rahul Narayanasamy · Answer

Hi Dallas, 
 
Thanks for the update. 
 
We are happy to hear that the provided solution helpful to resolve the problem. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul