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

Thread ID:	Created:	Updated:	Platform:	Replies:
150771	Jan 19,2020 08:43 PM UTC	Jan 20,2020 03:33 PM UTC	Blazor	1

Subscribe to this post

Tags: Grid

Preity

Asked On January 19, 2020 08:43 PM UTC

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?

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

Replied On January 20, 2020 03:33 PM UTC

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.

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US