We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add row and set cell into edit mode

When I add a new row into the grid (using batch edit mode) is it possible to select the first cell in the new row and put it into edit mode?

I've tried a few different ideas, but it seems that grid.EditCellAsync does not work with newly added rows. When I click the add button in the toolbar I want the second column "Name" in the new row to be set to edit with the cursor in the cell.

<SfGrid @ref="_grid" DataSource="Model" AllowPaging Toolbar="@(new List<string>() { "Add", "Update", "Delete", "Cancel" })" Height="300">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch" />
    <GridSelectionSettings Mode="SelectionMode.Cell"></GridSelectionSettings>
    <GridEvents TValue="Inventory" OnBatchAdd="BatchAdd" OnBatchSave="BatchSave" OnCellEdit="CellEdit" CellDeselected="CellDeselected" OnCellSave="CellSave" OnBatchCancel="BatchCancel" OnBatchDelete="BatchDelete" />
        <GridPrimaryKeyColumn Field="@nameof(Inventory.AssetId)" HeaderText="Id" />
        <GridColumn Field="@nameof(Inventory.Name)" HeaderText="Name"/>
        <GridColumn Field="@nameof(Inventory.Description)" HeaderText="Description" />
        <GridColumn Field="@nameof(Inventory.ItemType)" HeaderText="ItemType" />
        <GridColumn Field="@nameof(Inventory.Quantity)" HeaderText="Quantity" />
        <GridColumn Field="@nameof(Inventory.Weight)" HeaderText="Weight" />

6 Replies

AA Aaron January 3, 2023 05:47 PM UTC

Here is some of the code that I've tried but I don't have access to what I need to make it work in each method.

    private void ActionCompleted(ActionEventArgs<Inventory> args)
        //var fieldName = args.ColumnName;
        //int keyValue = args.Data.AssetId;
        //var index = await _grid.GetRowIndexByPrimaryKeyAsync(keyValue);
        //await _grid.SelectRowAsync(index);

    private async Task BatchAdd(BeforeBatchAddArgs<Inventory> args)
        bool test = true;

        //int index = args.Index;
        //var fields = await _grid.GetColumnFieldNamesAsync();
        //var fieldName = fields[1];

        var fieldName = ""; // args.ColumnName;
        int keyValue = 0; // args.Data.AssetId;
        var index = await _grid.GetRowIndexByPrimaryKeyAsync(keyValue);
        await _grid.SelectRowAsync(index);
        await _grid.EditCellAsync(0, fieldName); // Doesn't affect newly added row

AA Aaron January 15, 2023 08:50 PM UTC

I've not heard back about my question. Does anyone know if focusing and using EditCell for a newly added row is possible?

Thank you

SG Suganya Gopinath Syncfusion Team January 18, 2023 04:27 PM UTC


Yes, our team is validating the issue. They will update the details shortly. 

Sorry for the inconvenience caused. 

NP Naveen Palanivel Syncfusion Team January 25, 2023 02:48 AM UTC

Hi Aaron,

Sorry for the delay,

We validate the your query that you would like to have the focus automatically set to the second column when you are adding a new record. Unfortunately, it is not currently possible to directly set the focus to the second column. However, one way to achieve this is by setting the "Allow adding" option to false for the first column. This will cause the focus to automatically move to the second column when you are adding a new record

Please let us know if you have any concerns.


Naveen Palanivel

AA Aaron replied to Naveen Palanivel January 25, 2023 05:30 PM UTC

Hi  Naveen,

I have a few things to add here. In the previous code example I gave the GridPrimaryKeyColumn has the following code which should work as you say. Though what happens is that when the new row is added none of the columns are put into edit mode. This is better than if the first PK column was put into edit mode, but then I have no way of putting a cell into edit mode.

The  GridPrimaryKeyColumn has the following properties set.

protected override void OnInitialized()


    IsPrimaryKey = true;

    IsIdentity = true;

    AllowAdding = false;

    AllowEditing = false;


I have also attached a sample project that is also not working the way that it should give what you say to do to solve the issue. Please let me know what to change to make it work if you can. Also, if you look closely the CalendarEdit in the Date column is not working and may mean there is something else wrong with this example.

Here is a screenshot of what happens in the project that I have attached.

Thank you.

By the way, not being able to format the code in the reply is a pain.

Attachment: ClientWasmApp_e4488591.zip

NP Naveen Palanivel Syncfusion Team January 29, 2023 03:26 PM UTC

Hi Aaron,

We prepared sample to move the focus  to the second column while  adding  new record and  set allowadding  set as false in first column. We attached the sample for more information

Please let us know if you have any concerns.


Naveen Palanivel

Attachment: BlazorApp7_(2)_3c3ac66d.zip

Live Chat Icon For mobile
Up arrow icon