1. Home
  2. Forum
  3. Blazor
  4. DataGrid inline-edit Focus is not user friendly.

DataGrid inline-edit Focus is not user friendly.

hi.

In inline-edit edit mode, not in batch mode of DataGrid,
If you double-click the relevant cell with the mouse cursor or press the F2 key on the selected cell with the keyboard, the expected result is usually the input focus on the cell. The focus is on the cell in the first column.

If the ROW is a newly added ROW, it is probably in the cell of the first column.

However, it is inconvenient in the scenario that a specific cell of an existing row is corrected.



Should the current action be the default action?

5 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team June 19, 2020 10:57 AM UTC

Hi Seil,  
 
Thanks for contacting Syncfusion support.  
 
Query: “DataGrid inline-edit Focus is not user friendly.” 
 
From your query we suspect that you want Grid to focus the cell from the where the user double click the record. But the default behavior of the Grid is to focus the first editable column that is available in the edit form. So while inserting a record into Grid, first editable column will be first column.  
 
Similar while editing the existing record, focus will be set to first editable column in Grid edit form. This is default behavior of the Grid. 
 
Please get back to us if you have further queries or if we misunderstood your query.      
 
Regards, 
Vignesh Natarajan 


SE Seil June 22, 2020 04:31 AM UTC

Hi Vignesh Natarajan

I understood that this is the default behavior.

If so, from my point of view, I would be grateful to let you know how to achieve that with code, while understanding the input focus goes to the cell of the mouse cursor or the selected cell due to the keyboard even in inline-edit mode.

There were other guide documents with selection mode as cell to detect cell selection, but it didn't work for me.


VN Vignesh Natarajan Syncfusion Team June 23, 2020 12:01 PM UTC

Hi Seil,  
 
Thanks for the update.  
 
Query: “I would be grateful to let you know how to achieve that with code” 
 
We have achieved your requirement using CellSelected and OnActionComplete event of the Grid. In the CellSelected event, we have found the cell index where double click is made and in the OnActionComplete we have focused the cell using a JavaScript function with help of JSInterop.  
 
Refer the below code example.  
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings> 
    <GridEvents CellSelected="CellSelectHandler" OnActionComplete="OnComplete" TValue="Order"></GridEvents> 
. . . . .. . . .  
</SfGrid> 
  
@code{ 
    SfGrid<Order> Grid { get; set; } 
    public int CurrentEditCellIndex = 0; 
    public List<Order> Orders { get; set; } 
    public async Task OnComplete(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) 
        { 
            var Fields = await Grid.GetColumnFieldNames(); 
            await Runtime.InvokeVoidAsync("focus", Grid.ID, Fields[CurrentEditCellIndex]); // to call a JS fucnction to focus the cell 
        } 
    } 
    public async void CellSelectHandler(CellSelectEventArgs<Order> args) 
    { 
        var EditCellIndex = JsonConvert.DeserializeObject<Dictionary<string, object>>(args.CellIndex.ToString());  
  
        foreach (var key in EditCellIndex) 
        { 
            if (key.Key == "cellIndex") 
            { 
                CurrentEditCellIndex = Convert.ToInt32(key.Value); // to find the CellIndex 
            } 
        } 
    } 
 
Focusing.js 
 
function focus(GridID,ColumnName) {    document.getElementById(GridID + ColumnName).focus(); // to focus the element}
 
 
 
Note: Kindly ensure to define the GridSelectionMode as Both in GridSelectionSettings.  
 
Kindly download the sample from below  
 
 
Refer our UG and API documentation for your reference 
 
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


TR Travis November 14, 2020 06:14 AM UTC

Have you tried EditMode.Batch?  It seems to work as desired in that mode.
I'm hoping to get the same functionality in EditMode.Normal.  Consider Up-Voting recommendation to support this idea in Feedback.


VN Vignesh Natarajan Syncfusion Team November 16, 2020 06:47 AM UTC

Hi Travis,  
 
Thanks for contacting Syncfusion support.  
 
Query: “I'm hoping to get the same functionality in EditMode.Normal.  Consider Up-Voting recommendation to support this idea in Feedback” 
 
We have analyzed your query and we understand that you want to focus the cell from where the edit action gets initiated. We have achieved your requirement using CellSelected and OnActionComplete event of the Grid. In the CellSelected event, we have found the SelectedCellIndex and based in index we have focused the cell using JavaScript function and IJSRuntime.  
 
Refer the below code example.  
 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 
    <GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings> 
    <GridEvents CellSelected="CellSelectHandler" OnActionComplete="OnComplete" TValue="Order"></GridEvents> 
</SfGrid> 
  
@code{ 
    public List<Order> Orders { get; set; } 
    public double CurrentEditCellIndex = 0; 
    SfGrid<Order> Grid { get; set; } 
    public async Task OnComplete(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) 
        { 
            var Fields = await Grid.GetColumnFieldNames(); // return list of fields in cell 
            await Runtime.InvokeVoidAsync("focus", Grid.ID, Fields[(int)CurrentEditCellIndex]); // to call a JS fucnction to focus the cell 
        } 
    } 
    public async Task CellSelectHandler(CellSelectEventArgs<Order> args) 
    { 
        CurrentEditCellIndex = args.CellIndex; // get the cell index 
    } 
. . . . . 
function focus(GridID, ColumnName) {    setTimeout(function () {        if (document.getElementById(ColumnName))            document.getElementById(ColumnName).focus(); // to focus the element    }, 150);}
    
Note: Kindly define the Mode property of GridSelectionSettings as Both to get the selectedcell details.  
 
Kindly download the sample which we have prepared using above code example from below   
 
 
Refer our UG documentation for your reference 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


Marked as answer
Loader.
Up arrow icon