How to Handle Keyboard Navigation in Grid using BatchEdit Mode

[KINS]

I have check Blazor DataGrid BatchEdit Demo from below link.Really It's a great feature for Fast Data Entry purpose.I would like to know how to use below functionalities in Batch Grid.

1.Cursor should be focus on first column of first row.

2.How to handle keyboard navigation in Grid  for example

a, Move the cursor to next cell when pressing Enter Key on cell

b.When I press Enter key on last column of current row,the new row should be created (NewRowPosition = bottom )

c.Move the cursor on the cell When I press UP/DOWN/LEFT/RIGHT.

https://blazor.syncfusion.com/demos/datagrid/batch-editing

[Rahul Narayanasamy]

Hi Ismail, 

Greetings from Syncfusion. 

Query: Cursor should be focus on first column of first row. 

We have validated your query and we need some details regarding this query. Could you please share the below details. It will be helpful to validate and provide a better solution. 

• Whether did you want to focus the first cell of the first row at initial rendering(edit the first cell and focus that cell)?
• Share more information about this query.

 

Query: How to handle keyboard navigation in Grid  for example a, Move the cursor to next cell when pressing Enter Key on cell 

You want to edit the next row cell while pressing Enter key. We would like to inform you that while pressing the Enter key, the next row cell will be edited and focus is applied to that cell in batch editing. 

(or) 

If you want to edit and focus the next column cell, then you can achieve this requirement by using Tab key. While pressing Tab key in edit mode, it will edit the next column cell. 

Query: When I press Enter key on last column of current row,the new row should be created (NewRowPosition = bottom ) 

You want to create a new row while you are in last editable row. While pressing Tab key at the last row of last column, new row will be created at the bottom of the Grid by default. 

 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/editing/#adding-a-new-row-at-the-bottom-of-the-datagrid 

Query: Move the cursor on the cell When I press UP/DOWN/LEFT/RIGHT. 

Whether did you want to edit the corresponding right/ left cell using keyboard navigation. If yes, then you can achieve this requirement by using Tab/ Shift + Tab key.  Find the below documentation link for keyboard navigation. 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/accessibility/  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[KINS]

• Whether did you want to focus the first cell of the first row at initial rendering(edit the first cell and focus that cell)?

Yes at initial rendering 

You want to create a new row while you are in last editable row. While pressing Tab key at the last row of last column, new row will be created at the bottom of the Grid by default. 

 

Actually my requirement is always use Enter Key.So Please how to use Enter Key instead of Tab Key

Whether did you want to edit the corresponding right/ left cell using keyboard navigation. If yes, then you can achieve this requirement by using Tab/ Shift + Tab key.  Find the below documentation link for keyboard navigation. 

I need to use right/Left Key only Instead of Tab Shift Key

Please help its my top most urgent

[KINS]

Please help..

Awaiting for reply..

[KINS]

Please...

Still awaiting...

[Jeevakanth Palaniappan]

Hi Ismail, 

We have prepared a sample based on your scenario. We achieved your requirement by using the Edittemplate and bounded keydown, keyup handler. Then invoke the EditCell method to edit the required cell based on the row index and column field name. 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-278529004 

1. Editing a cell in the first row when grid is initially rendered

 

We have achieved this requirement by invoking the EditCell method in Grid’s Created event. 

    public async void Created() 

    { 

        await Grid.EditCell(0, nameof(Order.CustomerID)); 

    } 

2. Enter and ShiftEnter to navigate right and left cells

 

This requirement is achieved by bounding the keydown event in the components rendered in the Edit template. 

 

    public async void KeyDownHandler(KeyboardEventArgs args, int? OrderID, string Field) 

    { 

        if (Grid.IsEdit) 

        { 

            if (args.Key == "Enter") { 

                var rowIndex = await Grid.GetRowIndexByPrimaryKey(OrderID); 

                if (Field == "OrderID" && rowIndex == CurrentViewRecordCount - 1) 

                { 

                    await Grid.AddRecord(); 

                } 

                else { 

                    await Grid.EditCell(rowIndex, Field); 

                } 

 

            } 

        } 

    } 

3. ArrowDown and ArrowUp to navigate to down and up cells

 

This requirement is achieved by bounding the keyup event in the components rendered in the Edit template. 

    public async void KeyUpHandler(KeyboardEventArgs args, int? OrderID, string Field) 

    { 

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

        { 

            var cellIndex = await Grid.GetColumnIndexByField(Field); 

            var rowIndex = await Grid.GetRowIndexByPrimaryKey(OrderID); 

            rowIndex = args.Key == "ArrowDown" ? rowIndex + 1 : (args.Key == "ArrowUp" ? rowIndex -1 : rowIndex); 

            await Grid.EditCell(rowIndex, Field); 

        } 

    } 

 

You have to pass the field names in onkeydown and onkeyup events corresponding to keys pressed. Please refer the below code snippet and the sample for your reference 

 

    <GridKeySettings MoveDownCell="ArrowDown"></GridKeySettings> 

    <GridEvents Created="Created" DataBound="DataBound" TValue="Order"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch" NewRowPosition="NewRowPosition.Bottom"></GridEditSettings> 

.. 

.. 

.. 

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

            <EditTemplate> 

                @{ 

                    var con = context as Order; 

                } 

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

                                  @onkeydown="@(e=>KeyDownHandler(e,con.OrderID, "CustomerID"))" 

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

                </SfNumericTextBox> 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                @{ 

                    var con = context as Order; 

                } 

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

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

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

                </SfTextBox> 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                @{ 

                    var con = context as Order; 

                } 

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

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

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

                </SfTextBox> 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                @{ 

                    var con = context as Order; 

                } 

                <SfTextBox ID="ShipAddress" @bind-Value="con.ShipAddress" 

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

                           @onkeyup="@(e=>KeyUpHandler(e, con.OrderID,"ShipAddress"))"> 

                </SfTextBox> 

            </EditTemplate> 

        </GridColumn> 

 

 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-278529004 

Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP. 

[KINS]

Thanks for reply...

I really appreciate for the quick support...

[Jeevakanth Palaniappan]

Hi Ismail, 

Thanks for the update. Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP. 

[KINS]

sorry for late reply..

the below points is not available in example code

" b.When I press Enter key on last column of current row,the new row should be created (NewRowPosition = bottom )"

c.Move the cursor on the cell When I press UP/DOWN/LEFT/RIGHT.

(this function is not working in EditMode)

[Jeevakanth Palaniappan]

Hi Ahmed, 

We have checked your query and we are quite unclear about your requirement. So kindly confirm us the below details to proceed further. 

1. Now, on clicking the ArrowUp and ArrowDown, the up and down cells gets edited. So as like this, do you want to edit the next and previous cells of the row when you click the ArrowRight and ArrowLeft arrow?
2. Now, on clicking the Enter key in the last column of last row, a new row gets added. Do you want to add a new row when pressing the Enter key on last column in any of the rows?

We have attached the video demo for the currently working scenario’s. Please check it and share us the above requested details which will be helpful for us to validate your requirement. 

Video demo - https://www.syncfusion.com/downloads/support/directtrac/general/ze/KeyboardNavEditing-1620699085 

Regards, 

Jeevakanth SP. 

[KINS]

Point 1:-

Yes

Point 2:-

1.I want to add new row when I  press enter key in last row of last column 

2.If I I use enter key on last column in any row,then the cursor should go to next row.

Hope it's ckear

[Jeevakanth Palaniappan]

Hi Ahmed, 

Thanks for sharing the details. Based on your we have modified the previously provided sample. Please find the code changes and the sample below. 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-880477595 

<SfGrid> 

   <GridColumns> 

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

            <EditTemplate> 

                @{ 

                    var con = context as Order; 

                } 

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

                                  @onkeydown="@(e=>KeyDownHandler(e,con.OrderID, "CustomerID"))" 

                                  @onkeyup="@(e=>KeyUpHandler(e, con.OrderID, (e.Key == "ArrowRight" ? "CustomerID" : (e.Key == "ArrowLeft" ? "null" : "OrderID"))))"> 

                </SfNumericTextBox> 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                @{ 

                    var con = context as Order; 

                } 

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

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

                           @onkeyup="@(e=>KeyUpHandler(e, con.OrderID,(e.Key == "ArrowRight" ? "ShipCountry" : (e.Key == "ArrowLeft" ? "OrderID" : "CustomerID"))))"> 

                </SfTextBox> 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                @{ 

                    var con = context as Order; 

                } 

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

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

                           @onkeyup="@(e=>KeyUpHandler(e, con.OrderID,(e.Key == "ArrowRight" ? "ShipAddress" : (e.Key == "ArrowLeft" ? "CustomerID" : "ShipCountry"))))"> 

                </SfTextBox> 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                @{ 

                    var con = context as Order; 

                } 

                <SfTextBox ID="ShipAddress" @bind-Value="con.ShipAddress" 

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

                           @onkeyup="@(e=>KeyUpHandler(e, con.OrderID,(e.Key == "ArrowRight" ? "null" : (e.Key == "ArrowLeft" ? "ShipCountry" : "ShipAddress"))))"> 

                </SfTextBox> 

            </EditTemplate> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code{ 

 

    public async void KeyUpHandler(KeyboardEventArgs args, int? OrderID, string Field) 

    { 

        if (Grid.IsEdit && Field != "null") 

        { 

            if ((args.Key == "ArrowDown" || args.Key == "ArrowUp")) 

            { 

                var cellIndex = await Grid.GetColumnIndexByField(Field); 

                var rowIndex = await Grid.GetRowIndexByPrimaryKey(OrderID); 

                rowIndex = args.Key == "ArrowDown" ? rowIndex + 1 : (args.Key == "ArrowUp" ? rowIndex - 1 : rowIndex); 

                await Grid.EditCell(rowIndex, Field); 

            } 

            else if ((args.Key == "ArrowLeft" || args.Key == "ArrowRight")) 

            { 

                var rowIndex = await Grid.GetRowIndexByPrimaryKey(OrderID); 

                await Grid.EditCell(rowIndex, Field); 

            } 

        } 

    } 

 

    public async void KeyDownHandler(KeyboardEventArgs args, int? OrderID, string Field) 

    { 

        if (Grid.IsEdit) 

        { 

            if (args.Key == "Enter") { 

                var rowIndex = await Grid.GetRowIndexByPrimaryKey(OrderID); 

                if (rowIndex == CurrentViewRecordCount - 1) 

                { 

                    //The above if block is handled only for the last row 

                    if (!args.ShiftKey) 

                    { 

                        if (Field == "CustomerID") 

                        { 

                            //To add a new row when pressing Enter key from the Last Column of Last Row 

                            await Grid.AddRecord(); 

                        } 

                        else { 

                            //To edit the next cells when pressing Enter key 

                            await Grid.EditCell(rowIndex, Field); 

                        } 

                    } 

                    else 

                    { 

                        //To edit the previous cell when pressing Shift+Enter key 

                        await Grid.EditCell(rowIndex, Field); 

                    } 

                } 

                else { 

                    if (Field == "CustomerID" && !args.ShiftKey) 

                    { 

                        //To edit the next row when pressing Enter Key from the Last Column of Current Row 

                        await Grid.EditCell(rowIndex + 1, Field); 

                    } 

                    else 

                    { 

                        await Grid.EditCell(rowIndex, Field); 

                    } 

                } 

            } 

        } 

    } 

 

Get back to us if you have any other queries. 

Regards, 

Jeevakanth SP. 

[KINS]

please check my comments in attached screencast.

https://www.screencast.com/t/WdXn8KUa1kp

[Jeevakanth Palaniappan]

Hi Ahmed, 

We are currently validating the reported problem from our end and so we will update the further details in two business days. Until then we appreciate your patience. 

Regards, 

Jeevakanth SP. 

[Jeevakanth Palaniappan]

Hi Ahmed, 

We have modified your sample based on your scenario. Please find the below code changes and the sample for your reference. 

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

                else { 

                    if (rowIndex == -1) 

                    { 

                        //This block is handled to edit the cells by using Enter key in the newly added row(row which is not yet saved in datasource) 

                        rowIndex = await Grid.GetRowIndexByPrimaryKey(null); 

                        if (Field == "CustomerID" && !args.ShiftKey) { 

                            rowIndex = rowIndex - 1; 

                        } 

                    } 

                    if (Field == "CustomerID" && !args.ShiftKey) 

                    { 

                        //To edit the next row when pressing Enter Key from the Last Column of Current Row 

                        await Grid.EditCell(rowIndex + 1, Field); 

                    } 

                    else 

                    { 

                        await Grid.EditCell(rowIndex, Field); 

                    } 

                } 

Get back to us if you have any other queries. 

Regards, 

Jeevakanth SP.