Set focus on cell in editmode

[Soren M]

Hi, I have made a datagrid, and want to edit. If I click once, I can paste (ctrl+v) a new value in. If I doubleclick the cell becomes in editmode, but how do I set focus, so I just can start type? As of now I have to mouseclick to start type.

 

If I have a cell in edit-mode and navigate with the keyboard (TAB or ENTER)  I want the focus to follow, so I dont have to mouseclick to start type the new cell. 

How do I enable this feature?

[Vignesh Natarajan]

Hi Soren,  

 

Thanks for contacting Syncfusion support 

 

Query: “f I have a cell in edit-mode and navigate with the keyboard (TAB or ENTER)  I want the focus to follow, so I dont have to mouseclick to start type the new cell” 

 

From your query we understand that you want to move edit to next cell and focus while pressing the Tab. By default if the cell is editmode, pressing the tab will move the edit to next and that cell will be focused. Kindly refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/155672/ze/DataGrid-185567163  

 

If you are facing nay issues while pressing the tab key. Kindly share the following details.  

 

1. Are you facing any script error in browser console. Share the screenshot of the error.
2. Share the Grid code example.
3. Share the replication procedure of the issue along with video demonstration.
4. Share your Syncfusion Nuget Package version.

 

Requested details will be helpful for us to analyze your requirement and provide solution as soon as possible.  

 

Regards, 

Vignesh Natarajan 

[Soren M]

Hi Vignesh, thank you for your answer. I can see your examble is working fine, so I have investigated and found that the focus does not work if i use <SfAutoComplete>

See the modified example attached. 

How to I combine focus and <SfAutoComplete> ?

/Søren 

Attachment: DataGrid_2e885682.zip

[Vignesh Natarajan]

Hi Soren,  

 

Thanks for the update.  

 

Query: “so I have investigated and found that the focus does not work if i use <SfAutoComplete>” 

 

From your query we understand that you are facing issue while using custom component in EditTemplate. We suggest you to achieve your requirement using Created event of AutoComplete control to focus the control once it is created. Refer the below code example  

 

<SfGrid DataSource="@Orders" EnableAutoFill="true" AllowSelection="true" Toolbar="@(new List<string>() { "Add", "Update", "Cancel" })"> 

    <GridSelectionSettings CellSelectionMode="CellSelectionMode.Box" Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell" Type="SelectionType.Multiple"></GridSelectionSettings> 

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Batch"></GridEditSettings><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="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" TextAlign="TextAlign.Right" Width="130"> 

            <EditTemplate> 

                <SfAutoComplete @ref="AC1" ID="OrderDate" Value="@((context as Order).OrderDate)" 

                                DataSource="@Orders.GroupBy(o => new { o.OrderDate }).Select(o => o.FirstOrDefault()).ToList()"> 

                    <AutoCompleteFieldSettings Value="OrderDate"></AutoCompleteFieldSettings> 

                    <AutoCompleteEvents Created="@(() => OnCreate("OrderDate"))" TValue="string"></AutoCompleteEvents> 

                </SfAutoComplete> 

            </EditTemplate> 

        </GridColumn> 

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

            <EditTemplate> 

                <SfAutoComplete @ref="AC2" ID="Freight" Value="@((context as Order).Freight)" 

                                DataSource="@Orders.GroupBy(o => new { o.Freight }).Select(o => o.FirstOrDefault()).ToList()"> 

                    <AutoCompleteFieldSettings Value="Freight"></AutoCompleteFieldSettings> 

                    <AutoCompleteEvents Created="@(() => OnCreate("Freight"))" TValue="string"></AutoCompleteEvents> 

                </SfAutoComplete> 

            </EditTemplate> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    SfAutoComplete<string, Order> AC1 { get; set; } 

    SfAutoComplete<string, Order> AC2 { get; set; } 

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

    public async Task OnCreate(string Col) 

    { 

        await Task.Delay(200); 

        switch (Col) 

        { 

            case "Freight": 

                await AC2.FocusIn();// to focus the corresponding component  

                break; 

  

            case "OrderDate": 

                await AC1.FocusIn(); // to focus the corresponding component  

                break; 

        } 

    } 

 

  

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/155672/ze/DataGrid_-Updated1939842429  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Soren M]

It works perfectly. Thanks.

[Vignesh Natarajan]

Hi Soren, 

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan