Excel-like data entry and keyboard-based cell selection

[Daniel Koffler]

Hello,

how can I achieve an excel-like data entry and keyboard-based cell selection with the SyncFusion Grid like it is possible with this component.

Please notice the possibility to select cell with the navigation keys and to just start typing for data entry.

Additionally gridlines are shown horizontally and vertically without any interference by the blue selection indicator like shown here.

Thank you

Daniel

[Sarveswaran Palani]

Hi Daniel,

Greetings from Syncfusion support.

From your query, we prepared sample for keyboard-based cell selection to navigate each rows and columns. Kindly refer the attached sample for your reference. If we misunderstood your query, kindly share the more details about your requirement precisely. Based on that, we’ll validate and provide solution as early as possible at our end.

Regards,
Sarvesh

Attachment: SfGridExampleSelection_7e1f3cbe.zip

[Daniel Koffler]

Hello,

thank you for your response.

The following is missing:

1. A cell is not entering edit mode by just starting to type (like in Excel)
2. Vertical grid lines
   

Thank you

Daniel

[Sarveswaran Palani]

Hi Daniel,

Query: A cell is not entering edit mode by just starting to type (like in Excel)

We would like to inform you that the default behavior of the grid is to require a click or press of the Enter key to change the editable state of a cell. If you wish to make a grid column always editable, we suggest using the Template feature to achieve this. This will allow you to customize the appearance and behavior of the column to fit your needs. Kindly refer the attached documentation link for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/editing#how-to-make-a-grid-column-always-editable

Query: Vertical grid lines

To display cell border on the grid, we suggest that you set the GridLines property as Both. This property is an inbuilt feature of our component, and we have already discussed it in detail in our user guide documentation. We recommend that you refer to the documentation for more information on this topic. If you have any further queries or concerns, please feel free to get back to us.

Reference: https://blazor.syncfusion.com/documentation/datagrid/cell#datagrid-lines

Regards,
Sarvesh

[Daniel Koffler]

Referring to 1): This does not completely fulfil my requirements. I do not want to be always in edit mode. I want to change to edit mode if the user starts typing (same behaviour like in Excel).

Referring to 2): I am aware of the possibility to show the grid lines with built-in functionality. However the gridlines are shown additionally to the "focus" border lines. If a cell gets focus I want the grid lines to change e.g. color but not to have an additional border within the cell. (same look and feel like in Excel). Also refer to your own spreadsheet control --> ASP.NET Core Spreadsheet Default Functionalities Example - Syncfusion Demos. As you can see there the blue border replaces the grid lines and blue grid lines are not shown additionally to the grid lines.

[Sarveswaran Palani]

Hi Daniel,

Based on your requirement, You can make a cell editable on a single click with a Batch mode of editing in DataGrid by using the EditCell method. Kindly refer the attached documentation for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/how-to/single-click-editing-with-batch-mode

Regards,
Sarvesh

[Daniel Koffler]

Hello,

well this is not what I wanted to achieve.

The requirement was to enter edit mode by "key pressed" (=Excel-like)

Anyhow. I guess the data grid is not made to fulfil this requirement. Will try another more spreadsheet like component.

Thank you
Daniel

[Sarveswaran Palani]

Hi Daniel,

After reviewing your query, we regret to inform you that it is not possible to change the edit mode while the user is typing in the grid component. However, you can make the cell editable by using single click or pressing F2/ Shift+Tab keys, which are the default behaviors of the component. Kindly refer the attached links for your reference.

Reference: https://blazor.syncfusion.com/demos/datagrid/keyboard-navigation?theme=fluent

               https://blazor.syncfusion.com/documentation/datagrid/how-to/single-click-editing-with-batch-mode

               https://blazor.syncfusion.com/documentation/datagrid/editing#how-to-make-a-grid-column-always-editable

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

Regards,
Sarvesh

[Aaron]

I'm honestly very surprised the Syncfusion was not able to provide a solution to the key press event to edit a cell when any of the standard keys (1-0 or a-z) are pressed. I wouldn't expect that to be that hard and it's something that I would want as well. Syncfusion, I recommend that you figure this out and like the original poster stated, allow it to work in a way that is like Excel.

[Sarveswaran Palani]

Hi Aaron,

Sorry for the inconvenience caused.

Query: To provide a solution to the key press event to edit a cell when any of the standard keys (1-0 or a-z) are pressed.

We have checked your query and we suspect that you need to customize the keyboard event. If so, we suggest you to use OnKeyDown event. So that it will trigger for all keyboards click function. Based on that we can perform our custom operation. Kindly check the attached code snippet and sample for your reference.

 

<SfGrid DataSource="@Employees" @ref="Grid" @onkeydown="@KeyDown">

    <GridColumns>

...

    </GridColumns>

</SfGrid>

 

@code{

    public SfGrid<EmployeeData> Grid;

    private async Task KeyDown(KeyboardEventArgs args)

    {

        if (args.AltKey == true && args.Key == "h")

        {

           //customize here based on your requirement

        } 

    }

 

}

Please let us know if you have any concerns.

Regards,

Sarvesh