How to load data in Second Combobox based on First Combobox Value

Question

I have check Documentation of Blazor syncfusion Combox Data Loading from List.It works fine.I would like to know below points

How to load data in Second Combobox based on First Combobox Value (in normal EditForm)
How to load data in Second Combobox based on First Combobox Value (in Grid using Batch Mode)

Jeyanth Muthu Pratheeban Sankara Subramanian · Answer

Hello Ismail, Greetings from Syncfusion support.Query 1: How to load data in Second Combobox based on First Combobox Value (in normal EditForm) Response:We checked your query of achieving the cascading functionalities of Combobox. We prepared a sample for cascading functionalities of the ComboBox and attached it below for your convenience. In the attached sample, if a country is chosen, then corresponding states for the chosen county is loaded in the next combobox. Kindly refer the below code and attached sample. Hope this helps to meet your requirement.

@code { . . . public void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { this.EnableStateDropDown = !string.IsNullOrEmpty(args.Value); this.EnableCitytDropDown = false; this.StateQuery = new Query().Where(new WhereFilter() { Field = "CountryId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false }); this.StateValue = null; } public void ChangeState(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) { this.EnableCitytDropDown = !string.IsNullOrEmpty(args.Value); } . . . } Demo Link : https://blazor.syncfusion.com/demos/combobox/cascading?theme=bootstrap4 Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox-1912374161 Query 2: How to load data in Second Combobox based on First Combobox Value (in Grid using Batch Mode) Response:We also analyzed the reported query and we suggest you to achieve your requirement using the EditTemplate feature of the Grid. Using EditTemplate we can render the custom component in the Grid column while editing. Using the ComboxBox change event, we can update the second combo box datasource. Refer to the below code example. 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" }; } } For your convenience, we have prepared a sample which can be downloaded from below Sample Link : https://www.syncfusion.com/downloads/support/forum/164182/ze/DataGrid-2076271622 Refer to our UG documentation for your reference UG Link :https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template Please get back to us if you have further queries. Regards, Jeyanth.

Michele Semprini · Answer

Hi,i'm trying to do something like that in a generic Component.Here are my 2 combobox in 2 columns od a datagrid : When I edit a row of the grid and select an item in the first combobox, the ValueChange(...) is correctly fired but no changes in lookupChildren (DataSource of the second one) is shown in the second combo in the grid Someone can tell me if there's something wrong in the definition of the GridForeignColumns ? public List> lookups; public List> lookupChildren { get; set; } public void ValueChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs> args) { lookupChildren.Clear(); lookupChildren.Add(new LookupItem(1, "1")); lookupChildren.Add(new LookupItem(2, "2")); //*** or load something else in children *** } public class LookupItem { public T Id { get; set; } public string Description { get; set; } }thnks a lot, m.

Prathap Senthil · Answer

Hi Michele,

Based on the reported problem We would like to inform you that we have prevented unwanted rendering of the Grid component during the external action for better performance. So we suggest you use PreventRender(false) on the value change event to reflect the changes in the DataGrid. Kindly refer to the attached code snippet for your reference.

<SfGrid @ref="Grid"……>

</SfGrid>
@code{
SfGrid<TValue> Grid { get; set; }
public void ValueChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<int, LookupItem<int>> args)

{

lookupChildren.Clear();

lookupChildren.Add(new LookupItem<int>(1, "1"));

lookupChildren.Add(new LookupItem<int>(2, "2"));
Grid.PreventRender(false);

}

If you still face difficulties, then kindly share us an simple issue reproduceable sample. It will be very helpful for us to validate the reported issue.

Regards,
Prathap S