EjsGrid Edit Mode-Change datasource of column dropdown according to other column dropdown selection.

[Preity]

Hi There,

I am working with Grid edit and I have 4 comboboxes for 4 columns in my grid. I want to change the combobox datasource according to the selection of 1st combobox for adding a new record. When I am doing that it is resetting the whole thing. Is there any way to achieve this?

[Vignesh Natarajan]

Hi Preity, 

 

Greetings from Syncfusion support.  

 

Query: “I want to change the combobox datasource according to the selection of 1st combobox for adding a new record” 

 

We suggest you to achieve your requirement using ValueChange event of EjsComboBox control. Bind the ValueChange event to First ComboBox and on its value change, kindly modify the data source of other ComboBox using datasource property. Refer the below code example.  

 

<EjsGrid AllowPaging="true" DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

 .. . . . .  . . . . . . . . … .  

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"> 

            <EditTemplate> 

                <EjsComboBox ID="CustomerID" Value="@((context as Order).CustomerID)" DataSource="@Customers"> 

                    <ComboBoxFieldSettings Value="CustomerID"></ComboBoxFieldSettings> 

                    <ComboBoxEvents ValueChange="OnChange" TValue="string"></ComboBoxEvents> 

                </EjsComboBox> 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID1) HeaderText="Customer Name" Width="150"> 

            <EditTemplate> 

                <EjsComboBox ID="CustomerID1" Value="@((context as Order).CustomerID1)" DataSource="@Customers1"> 

                    <ComboBoxFieldSettings Value="CustomerID"></ComboBoxFieldSettings> 

                </EjsComboBox> 

            </EditTemplate> 

        </GridColumn> 

. . . . . . . . . . .. . .  

    </GridColumns> 

</EjsGrid> 

 

public void OnChange(ChangeEventArgs<string> Args) 

    { 

        Customers1 = Enumerable.Range(1, 12).Select(x => new Customer() 

        { 

            CustomerID = (new string[] { "VINET", "BERGS", "NANCY", "ANDREW", "DAVALIO" })[new Random().Next(5)], 

        }).ToList(); 

    . . . . . . . .  

 

//similar way you can change the datasource of other combobox 

    } 

 

Refer our UG documentation for your reference 

 

https://ej2.syncfusion.com/blazor/documentation/combobox/native-events/?no-cache=1  

 

Kindly get back to us if you have further queries or if you find any difficulties in above solution.  

 

Regards, 

Vignesh Natarajan.