Grid Inline Edit Keyboard Navigation not updating UI until field loses focus 2nd time.

[JayaKrishna Ch]

I am navigating through arrow keys for editing grid. 

But the UI is not being updated until field loses focus 2nd time.   (See the video).

Github repo - https://github.com/chjayakrishnajk/Syncfusion_Grid

Attachment: ServerApp_e134fb8f.zip

[JayaKrishna Ch]

Video

Attachment: Video_c97a9f1c.zip

[Renjith Singh Rajendran]

Hi JayaKrishna, 

Greetings from Syncfusion support. 

We suggest you to ensure to update the cell value using UpdateCell method before calling the EditCell to overcome the reported behavior. We have modified the sample for your convenience, please download the working sample from link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1682036612 

References :  

https://blazor.syncfusion.com/documentation/datagrid/events/#oncelledit 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateCell_System_Double_System_String_System_Object_ 

Please refer and modify as like the below highlighted codes in your application. 

 

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

    ... 

    <GridEvents OnCellEdit="OnCellEdit" ... TValue="Order"></GridEvents> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"> 

            <EditTemplate> 

                ... 

                <SfNumericTextBox ID="OrderID" @bind-Value="con.OrderID" 

                                  @onkeyup="@(e=>KeyUpHandler(e, con.OrderID, null , "OrderID" , "CustomerID",inputvalue))"> 

                      <NumericTextBoxEvents ValueChange="ValueChange" TValue="int?"></NumericTextBoxEvents>

                </SfNumericTextBox> 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                ... 

                <SfTextBox ID="CustomerID" @bind-Value="con.CustomerID" OnInput="OnInput" 

                           @onkeydown="@(e=>KeyDownHandler(e,con.OrderID, (e.Key == "Enter" && !e.ShiftKey ? "ShipCountry": "OrderID")))" 

                           @onkeyup="@(e=>KeyUpHandler(e, con.OrderID,null, "CustomerID" , "ShipCountry",inputvalue))"> 

                </SfTextBox> 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                ... 

                <SfTextBox ID="ShipCountry" @bind-Value="con.ShipCountry" OnInput="OnInput" 

                           @onkeyup="@(e=>KeyUpHandler(e, con.OrderID, "CustomerID","ShipCountry" , "Boolean",inputvalue))"> 

                </SfTextBox> 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.Boolean) HeaderText="Boolean" Width="150"> 

            <EditTemplate> 

                ... 

                <SfCheckBox ID="Boolean" @bind-Checked="con.Boolean" ValueChange="ValueChange" TChecked="bool" 

                           @onkeyup="@(e=>KeyUpHandler(e, con.OrderID, "ShipCountry","Boolean" , null,inputvalue))"> 

                </SfCheckBox> 

            </EditTemplate>            

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    public object inputvalue; 

    public void OnInput(ChangeEventArgs args) 

    { 

        inputvalue = args.Value; 

    } 

    public void ValueChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) 

    { 

        inputvalue = args.Checked; 

    } 

    public void ValueChange(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args) 

    { 

        inputvalue = args.Value; 

    } 

    public void OnCellEdit(CellEditArgs<Order> args) 

    { 

        inputvalue = args.Data.GetType().GetProperty(args.ColumnName).GetValue(args.Data, null); 

    } 

    ...  

    public async void KeyUpHandler(KeyboardEventArgs args, int? OrderID,string leftField, string Field , string rightField, object FieldValue) 

    { 

        if (Grid.IsEdit && (args.Key == "ArrowDown" || args.Key == "ArrowUp")) 

        { 

            var rowIndex = await Grid.GetRowIndexByPrimaryKey(OrderID); 

            await Grid.UpdateCell(rowIndex, Field, FieldValue); 

            await Grid.EndEdit(); 

            ... 

        } 

        if (Grid.IsEdit && args.Key == "ArrowLeft" && leftField != null) 

        { 

            var rowIndex = await Grid.GetRowIndexByPrimaryKey(OrderID); 

            await Grid.UpdateCell(rowIndex, Field, FieldValue); 

            await Grid.EditCell(rowIndex, leftField); 

        } 

        if (Grid.IsEdit && args.Key == "ArrowRight" && rightField != null) 

        { 

            var rowIndex = await Grid.GetRowIndexByPrimaryKey(OrderID); 

            await Grid.UpdateCell(rowIndex, Field, FieldValue); 

            await Grid.EditCell(rowIndex, rightField); 

        } 

    } 

} 

 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith R 

[JayaKrishna Ch]

Thank you very much for help

[Renjith Singh Rajendran]

Hi JayaKrishna, 

Thanks for your update. Please get back to us if you need further assistance. 

Regards, 

Renjith R