Excel like grid control

[Goran]

Hello,

I am evaluating your Blazor components for our next project, and the main focus is on Grid control. There are some behaviors that will be essential for our clients. Here is my current grid setup:

<SfGrid DataSource="_items" Width="100%" Height="100%" EnableHover="false">
  <GridTemplates>
    <EmptyRecordTemplate>
      <CustomEmptyGridMessage />
    </EmptyRecordTemplate>
  </GridTemplates>
  <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Batch" />
  <GridSelectionSettings Type="SelectionType.Single" Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell" EnableToggle="false" />
  <GridKeySettings  />
  <GridColumns>
...
  </GridColumns>
</SfGrid>

In simple terms, we need am excel like behavior for Grid,  where we can do batch update. User can select only one cell at a time. No row hover effect required. Some columns will be read-only, calculated from values by other columns. Solution to some of the requirements I already found, and below are the ones I haven't:

1) Prevent navigation to column header cells

2) When user starts typing in a cell, it should go into edit mode. Currently it doesn't do anything.

3) When I click on cell, I get background color of selected cell. When I use arrow key to navigate to next cell, this cell gets the background color of selected cell, but also blue border around it. Why do we have two different appearances for selected cell? Can we have blue border around in both cases?

4) When user navigates from grid, selected cell blue border disappears, but selected background remains. This looks something like notfocused-selected style? Can I get rid of it? If user navigates away from grid, there should be no cell selected.

5) Is there some option like a "lookup" filtered list. Lets say that I am showing product name in 2nd column. When user starts typing in any cell in 2nd column, some kind of drop-down list is shown, which will show a list of products filtered by what user typed. And since this list could have up to 5.000 records, it should support virtualization. Or I need to use additional control for this, which I fill show / hide if in cell edit mode?

Thanks,

Goran

[Naveen Palanivel]

Hi Ben,

Currently we are checking the reported query at our end. We will update further details on or before 21 September 2022.

Until then we appreciate your patience.

Regards,

Naveen Palanivel

[Naveen Palanivel]

Hi Ben,

Currently we are checking the reported query at our end. We will update further details on or before 27 September 2022.

Until then we appreciate your patience.

Regards,

Naveen Palanivel

[Naveen Palanivel]

Hi Goran

Thanks for the Patience

Query 1 “Prevent navigation to column header cells”

We have checked your query and before proceeding further with your requirement kindly share the below details to validate further at our end.

1. Share us more detail what to be  prevent detailly  and which time it be prevent.
2. Share us the video demonstration of the issue

Above request details will be very helpful for us to further validate the reported query at our end and provide solution as easy as possible.

Query 2 “ go into edit mode”

We checked your query and we would like to inform that we current does not support when user starts typing in cell, that cell in edit mode. We have support when click the cell, that cell goes to the edit state in batch mode. We shared our UG documentation below link for your reference

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

Query 3 &4 : ‘’ background color of selected cell & user navigates from grid, selected cell blue border disappears”

We have checked your query and before proceeding further with your requirement kindly share the video demonstration of you requirement or issue you facing  to validate further at our end.

Query 5: “kind of drop-down list is shown”

We checked your query and we suspect you want show the value when you typing in the cell. So, we suggest you can render combobox filter inside the Edit template. We also shared the UG documentation for ComboBox filter link below . please refer the UG documentation

Reference:” https://blazor.syncfusion.com/documentation/combobox/filtering”

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

[Aaron]

I'm going to piggy back on this thread and add that I also want Excel style grid styling and keyboard navigation in addition to what the original poster has asked. In addition, is it possible to change the keyboard actions so that specific keys can execute specific actions? An example would be to change the cell edit mode from the F2 key to use Ctrl + Enter to edit a cell.

[Balamurugan Lakshmanan]

Hi Aaron,

By default Enter key is used to navigate the selection to the next row. So when the record is selected, press the enter key. The next row will be selected. So now we have modified the solution to make the record go into edit mode using Enter key.

Refer the below code example for your reference.

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" @onkeydown="OnKeyDown" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height ="315">

   <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>

   <GridKeySettings MoveDownCell="ArrowDown" MoveUpCell="ShiftEnter,ArrowUp"></GridKeySettings>

    <GridColumns>

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

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

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

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

    SfGrid<Order> Grid { get; set; }

    public async Task OnKeyDown(KeyboardEventArgs Args){

        if(Args.Code == "Enter"){

            var selected = await Grid.GetSelectedRecordsAsync();

            if(selected.Count > 0)

            {

                await Grid.StartEditAsync();

            }

        }

    }

Kindly refer to the sample in the attachment for your reference.

Please get back to us if you have further queries.

Regards,

Bala.

Attachment: BlazorGrid_ac0e3d70_b9767670.zip