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

9 Replies
3 Participants

Created by
MB Mark Barton

Platform
Blazor

Platform
Blazor

Control
Grid

Created On
Apr 17, 2020 07:42 AM UTC

Last Activity On
Oct 23, 2020 07:33 AM UTC

Want to subscribe?
SIGN IN

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?

9 Replies

RN Rahul Narayanasamy Syncfusion Team April 20, 2020 11:17 AM UTC

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.

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

<GridEvents OnActionBegin="OnActionBegin" TValue="OrdersDetails"></GridEvents>

<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>

<GridColumns>

. . .

<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150">

<EditTemplate>

<SfDropDownList ID="ShipCountry" Placeholder="Select a Country" TItem="string" TValue="string" DataSource="@Countries">

<DropDownListEvents TValue="string" ValueChange="ValueChange"></DropDownListEvents>

<DropDownListFieldSettings Text="ShipCountry" Value="ShipCountry"></DropDownListFieldSettings>

</SfDropDownList>

</EditTemplate>

</GridColumn>

<GridColumn Field=@nameof(OrdersDetails.ShipState) HeaderText=" ShipState" EditType="EditType.DropDownEdit" Width="150">

<EditTemplate>

<SfDropDownList ID="ShipState" Placeholder="Select a State" TItem="string" Enabled="@Enabled" TValue="string" DataSource="@States">

<DropDownListFieldSettings Text="ShipState" Value="ShipState"></DropDownListFieldSettings>

</SfDropDownList>

</EditTemplate>

</GridColumn>

</GridColumns>

</SfGrid>

@code{

public List<OrdersDetails> GridData { get; set; }

public List<string> Countries = new List<string>() { "United States", "Australia" };

public List<string> States = new List<string>() { "New York", "Virginia", "Washington" };

public bool Enabled = false;

. . .

public void ValueChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)

{

if (args.Value == "United States")

{

States = new List<string>() { "New York", "Virginia", "Washington" };

}

else if (args.Value == "Australia")

{

States = new List<string>() { "Queensland", "Tasmania", "Victoria" };

}

Enabled = true;

}

public void OnActionBegin(ActionEventArgs<OrdersDetails> 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

MB Mark Barton April 21, 2020 07:18 AM UTC

Hi Rahul

That 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?

Thanks

Mark

RN Rahul Narayanasamy Syncfusion Team April 22, 2020 12:25 PM UTC

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.

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

<GridEvents OnActionBegin="OnActionBegin" TValue="OrdersDetails"></GridEvents>

<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>

<GridColumns>

. . .

<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150">

<EditTemplate>

<SfDropDownList ID="ShipCountry" Value="@((context as OrdersDetails).ShipCountry)" Placeholder="Select a Country" TItem="string" TValue="string" DataSource="@Countries">

<DropDownListEvents TValue="string" ValueChange="ValueChange"></DropDownListEvents>

<DropDownListFieldSettings Text="ShipCountry" Value="ShipCountry"></DropDownListFieldSettings>

</SfDropDownList>

</EditTemplate>

</GridColumn>

<GridColumn Field=@nameof(OrdersDetails.ShipState) HeaderText=" ShipState" EditType="EditType.DropDownEdit" Width="150">

<EditTemplate>

<SfDropDownList ID="ShipState" Value="@((context as OrdersDetails).ShipState)" TItem="string" Enabled="@Enabled" TValue="string" DataSource="@States">

<DropDownListFieldSettings Text="ShipState" Value="ShipState"></DropDownListFieldSettings>

</SfDropDownList>

</EditTemplate>

</GridColumn>

</GridColumns>

</SfGrid>

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

DK Dallas Kostna October 19, 2020 04:34 PM UTC

I've created the following grid (in Blazor Server mode):

<SfGrid @ref="LineItemGrid" DataSource="@zohoService.OMG_LineItems" Toolbar="@(new List<string>() { "Edit","Update","Cancel" })">

</SfDropDownList>

</EditTemplate>

</GridColumn>

</SfDropDownList>

</EditTemplate>

</GridColumn>

</GridColumns>

</SfGrid>

In the code, I have the following:

private void SKUChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, CreatorItem> 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!

RN Rahul Narayanasamy Syncfusion Team October 20, 2020 02:08 PM UTC

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.

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

<GridEvents OnActionBegin="OnActionBegin" TValue="Orders"></GridEvents>

<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>

<GridColumns>

. . .

<GridColumn Field=@nameof(Orders.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150">

<EditTemplate>

<SfDropDownList ID="ShipCountry" Placeholder="Select a Country" TItem="string" TValue="string" @bind-Value="@((context as Orders).ShipCountry)" DataSource="@Countries">

<DropDownListEvents TItem="string" TValue="string" ValueChange="ValueChange"></DropDownListEvents>

<DropDownListFieldSettings Text="ShipCountry" Value="ShipCountry"></DropDownListFieldSettings>

</SfDropDownList>

</EditTemplate>

</GridColumn>

<GridColumn Field=@nameof(Orders.ShipState) HeaderText=" ShipState" EditType="EditType.DropDownEdit" Width="150">

<EditTemplate>

<SfDropDownList ID="ShipState" Placeholder="Select a State" TItem="string" Enabled="@Enabled" TValue="string" @bind-Value="@((context as Orders).ShipState)" DataSource="@States">

<DropDownListFieldSettings Text="ShipState" Value="ShipState"></DropDownListFieldSettings>

</SfDropDownList>

</EditTemplate>

</GridColumn>

</GridColumns>

</SfGrid>

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

DK Dallas Kostna October 21, 2020 07:24 PM UTC

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.

RN Rahul Narayanasamy Syncfusion Team October 22, 2020 04:45 PM UTC

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.

<SfGrid @ref="Grid" AllowPaging="true" DataSource="@GridData" ShowColumnChooser="true" Toolbar="@(new List<string>() { "Add","Edit","Delete","Update","Cancel" })">

<GridEvents OnActionBegin="OnActionBegin" OnActionComplete="ActionCompletedHandler" TValue="Orders"></GridEvents>

<GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>

<GridColumns>

. . .

</GridColumns>

</SfGrid>

@code{

SfGrid<Orders> Grid;

public List<Orders> GridData { get; set; } = new List<Orders>();

. . .

public bool Enabled { get; set; }

. . .

public void OnActionBegin(ActionEventArgs<Orders> args)

{

if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit)

{

Enabled = false;

Grid.PreventRender(false);

}

public void ActionCompletedHandler(ActionEventArgs<Orders> 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

DK Dallas Kostna October 23, 2020 01:41 AM UTC

Awesome - works perfectly - thanks so much!

RN Rahul Narayanasamy Syncfusion Team October 23, 2020 07:33 AM UTC

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

Need More Help?

Get personalized assistance from our support team.

Contact Support

9 Replies
3 Participants
Want to subscribe?
SIGN IN
Created by
MB Mark Barton
Platform
Blazor
Control
Grid
Created On
Apr 17, 2020 07:42 AM UTC
Last Activity On
Oct 23, 2020 07:33 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support