Events and Tabulation

Good evening,

I noticed that certain events only fire on Batch mode, like OnCellSave, for example. Is that correct?
Also, in Batch mode, the columns that are not editable are accessible with the tab key, what is a inconvenience, in my case. How can I avoid this?

Thanks in advance

Társis Francke Ferreira

3 Replies 1 reply marked as answer

JP Jeevakanth Palaniappan Syncfusion Team May 21, 2021 11:24 AM UTC

Hi Társis, 

Greetings from Syncfusion support. 

Please find the details of your query below. 

Query 1: I noticed that certain events only fire on Batch mode, like OnCellSave, for example. Is that correct? 
 
Yes, certain events like OnBatchAdd, OnBatchSave, OnBatchDelete, OnCellSave, OnCellEdit, CellSaved will be triggered only for the Batch mode. This is the default behavior.  
OnActionBegin and OnActionComplete events will be triggered for all the grid actions. Please refer the below documentation for your reference. 
 
Batch Events: 

Action Events: 

Query 2:  In Batch mode, the columns that are not editable are accessible with the tab key, what is a inconvenience, in my case. How can I avoid this? 

We suggest you to use the EditTemplate feature and render the corresponding editor component in the GridColumn and the skip the editing for next column by using the EditCell method of the grid. Please refer the below code snippet and the sample for your reference. 




<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowNextRowEdit="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"> 
            <EditTemplate> 
                    <SfTextBox ID="CustomerID" @onkeydown="Keydo" @bind-Value="@((context as Order).CustomerID)"></SfTextBox> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" AllowEditing="false" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 
 
@code{ 
    SfGrid<Order> Grid { get; set; } 
    public List<Order> Orders { get; set; } 
 
    public async void Keydo(KeyboardEventArgs Args) 
    { 
        if (Args.Code == "Tab") 
        { 
            var selectedIndex = await Grid.GetSelectedRowIndexes(); 
            await Grid.EditCell(selectedIndex[0], Grid.Columns[3].Field); 
        } 
    } 
} 

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

Regards, 
Jeevakanth SP. 


Marked as answer

RT Ryan Tomko July 30, 2021 07:20 PM UTC

If there another way to skip non-editable columns in batch mode?    I have a grid with many columns and all of them are set to AllowEditing="false" except for two columns which are editable.   I want the batch edit focus to move to the next editable column (perhaps in the next row) when Tab is pressed.



JP Jeevakanth Palaniappan Syncfusion Team August 2, 2021 10:56 AM UTC

Hi Ryan, 

We have checked your query and based on your scenario we have prepared a sample to navigate to the next row editable cell from the previous row. Please refer the below code snippet and the sample for your reference. 

@using Syncfusion.Blazor.Grids 
@using Syncfusion.Blazor.Inputs 
 
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowNextRowEdit="true" Mode="EditMode.Batch"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"> 
            <EditTemplate> 
                    <SfTextBox ID="CustomerID" @onkeydown="@(e=>Keydo(e, (context as Order)))" @bind-Value="@((context as Order).CustomerID)"></SfTextBox> 
            </EditTemplate> 
        </GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" AllowEditing="false" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"> 
            <EditTemplate> 
                @{ 
                    <SfTextBox ID="ShipCountry" @onkeydown="@(e=>ShipCountryKeydown(e, (context as Order)))" @bind-Value="@((context as Order).ShipCountry)"></SfTextBox> 
                } 
            </EditTemplate> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid { get; set; } 
    public List<Order> Orders { get; set; } 
 
    public async void Keydo(KeyboardEventArgs Args, Order order) 
    { 
        if (Args.Code == "Tab") 
        { 
            var index = await Grid.GetRowIndexByPrimaryKey(order.OrderID); 
            await Grid.EditCell(index, Grid.Columns[3].Field); 
        } 
    } 
 
    public async void ShipCountryKeydown(KeyboardEventArgs Args, Order order) 
    { 
        if (Args.Code == "Tab") 
        { 
            var index = await Grid.GetRowIndexByPrimaryKey(order.OrderID); 
            await Grid.EditCell(index +1, Grid.Columns[1].Field); 
        } 
    } 
 


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

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon