Dropdown (in grid) ValueChanged event randomly firing

[Alex]

Hi,

We have a dropdown within our grid control which has a ValueChanged event.  This all works fine, however if we move page the ValueChanged randomly fires and resets a property. 

Any ideas?

<SfGrid DataSource="@workorders" AllowPaging="true" Toolbar="@(new List<string>() { "Search" })">

    <GridColumns>

        <GridColumn Field=@nameof(Model.Workorder.ScheduledDate) HeaderText="Scheduled Date" Format="d" TextAlign="TextAlign.Left" Width="120"></GridColumn>

         <GridColumn Field=@nameof(Model.Workorder.UrgencyLevel) HeaderText="Urgency Level" EditType="EditType.DropDownEdit" Width="150">

            <Template>

                <SfDropDownList TValue="Model.WorkorderUrgencyLevel" TItem="string" DataSource="@EnumValues" @bind-Value="@((context as Model.Workorder).UrgencyLevel)">

                    <DropDownListEvents TValue="Model.WorkorderUrgencyLevel" TItem="string" ValueChange="@(e => ChangeUrgencyLevel(e,(context as Model.Workorder)))"></DropDownListEvents>

                </SfDropDownList>

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>

public async Task ChangeUrgencyLevel(ChangeEventArgs<WorkorderUrgencyLevel, string> args, Model.Workorder workorder)

        {

            var urgencyLevel = (WorkorderUrgencyLevel)Enum.Parse(typeof(WorkorderUrgencyLevel), args.ItemData);

            workorder.UrgencyLevel = urgencyLevel;

            await Service.WorkorderService.UpdateAsync(workorder);

        }

[Vignesh Natarajan]

Hi Alex,  

 

Greetings from Syncfusion support.  

 

Query: “ however if we move page the ValueChanged randomly fires and resets a property. ” 

 

We have analyzed your query and we are able to reproduce the reported behavior at our end also. This is because you have rendered the DropDownList component inside the GridColumn Template which will be rendered multiple times for all record.  

 

To overcome the reported issue, we suggest you to define the @key variable to component inside the Template definition with a unique value (i.e.) using primary key value or some random unique value. Refer the below code example.  

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Search" })"> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Scheduled Date" Format="d" TextAlign="TextAlign.Left" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Urgency Level" EditType="EditType.DropDownEdit" Width="150"> 

            <Template> 

                <SfDropDownList @key="@((context as Order).OrderID)" TValue="string" TItem="Order" DataSource="@Orders" @bind-Value="@((context as Order).CustomerID)"> 

                    <DropDownListFieldSettings Value="CustomerID"></DropDownListFieldSettings> 

                    <DropDownListEvents TValue="string" TItem="Order" ValueChange="@(e => ChangeUrgencyLevel(e,(context as Order)))"></DropDownListEvents> 

                </SfDropDownList> 

            </Template> 

        </GridColumn>        

    </GridColumns> 

</SfGrid> 

@code{ 

    public List<Order> Orders { get; set; } 

  

    SfGrid<Order> Grid { get; set; } 

  

    public async Task ChangeUrgencyLevel(ChangeEventArgs<string, Order> args, Order workorder) 

    { 

        Order ord = Orders.Find(x => x.OrderID == workorder.OrderID); 

        ord.CustomerID = args.Value; 

        Grid.Refresh(); 

    } 

 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan