1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to focus to a specific cell when enter key is pressed in another cell.

How to focus to a specific cell when enter key is pressed in another cell.

Hi,
In my grid, I need to do something like this. When I press the enter key after editing the cell of column2, the focus should go to the cell of column 5 in the same row. How do I get this kind of behaviour. Please help.
Thank You,
Kalum

5 Replies
VN Vignesh Natarajan Syncfusion Team September 28, 2018 06:40 AM UTC

Hi Kalum, 

Thanks for using Syncfusion products 

From your query we understand that you want to move focus one cell to another by pressing the enter key. By default we have given support to different types of EditModes with different behavior 

Batch Edit Mode: 
In  Batch edit mode, we can navigate through cells using tab key. Pressing will enter key will edit the first editable cell of next row (record). 
Inline Edit mode: 
In Inline mode edit form, pressing the enter key in edit mode will save the changes. Then pressing tab key in edit mode, will focus the next corresponding editable cell. 

So kindly share which type of editMode your are using. So that based on your editMode we will provide you the solution.  

Regards, 
Vignesh Natarajan.       



KA kalum September 28, 2018 08:35 AM UTC

Hi Vignesh,
Thanks for your quick response. I am using Batch Edit Mode and using bellow function to move the curser cell by cell when enter is pressed.
But at Column2 when I press enter key, I need to move the focus to Column5 straightaway.

 function onLoad() {
        this.model.keySettings = { moveCellRight: "13", saveRequest: " " };
    }



Thank you,
Kalum

VN Vignesh Natarajan Syncfusion Team September 28, 2018 11:51 AM UTC

Hi Kalum, 
 
Thanks for your update. 
 
From your query we understand that you using batch EditMode and you have defined the key Settings for Enter Key for moveCellRight action. We suspect that, if you want to focus the 5th Cell after editing 2nd means, you do not want to edit 3rd and 4th cell. 
 
Then you can disable the editing action for these columns by defining the AllowEditing property as false.      
Refer the below code example 
 
@(Html.EJ().Grid<object>("FlatGrid") 
                 .Datasource((IEnumerable<object>)ViewBag.datasource) 
.                 .               .                .                 .                 .                .  
        .Columns(col => 
         { 
             col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
             col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
             col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).AllowEditing(false).Width(75).Add(); 
             col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).AllowEditing(false).Format("{0:C}").Add(); 
             col.Field("ShipCity").HeaderText("Ship City").Width(110).Add(); 
         })) 
</div> 
<script> 
    function onLoad() { 
        this.model.keySettings = { moveCellRight: "13", saveRequest: " " }; 
    } 
</script> 
 
 
 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
 
 
Refer our API documentation for your reference 
 
 
Regards, 
Vignesh Natarajan 


KA kalum September 28, 2018 05:01 PM UTC

Hi Vignesh,

Thanks very much for your solution. But in my case i cannot disable editing action of any column.  I will explain my requirement more clearly. My colums are as follows.

ItemKey | ItemCode | ItemName | Unit | CostPrice | Quantity | Description | Location

In this, ItemCode and ItemName columns are dropdown columns. If the user select an ItemCode from drop down then it's ItemName,Unit and CostPrice will automatically fill from datasauce and same thing happens if ItemName selected. After selecting ItemCode or ItemName, the focus should move to Quantity, Description and Location columns respectively. Hope this is more clear.

Thank you
Kalum

VN Vignesh Natarajan Syncfusion Team October 1, 2018 05:20 AM UTC

Hi Kalum, 
 
Sorry for the inconvenience caused. 
 
 
We have achieved your requirement (edit 5th cell after editing the 2nd cell) using CellSave, CellEdit event  and editCell() method of ejGrid.  
 
Refer the below code example 
 
@(Html.EJ().Grid<object>("FlatGrid") 
.                   .                         .                              .                    .                      .                       .  
                      .ClientSideEvents(e => e.Load("onLoad").CellEdit("edit").CellSave("save")) 
.                                .                          .                      .                            .                           .  
         })) 
</div> 
<script> 
    function edit() { 
        if (args.cell.index() == 2) // to prevent the next cell (2nd) from editing 
            args.cancel = true; 
    } 
    function save() { 
        if (args.cell.index() == 1) { 
            var proxy = this; 
            var arg = args; 
            setTimeout(function () { 
                proxy.editCell(arg.cell.closest("tr").index(), proxy.getColumnByIndex(5).field); 
            }, 0) 
        } 
    } 
    function onLoad() { 
        this.model.keySettings = { moveCellRight: "13", saveRequest: " " }; 
    } 
</script> 
 
 
 
For your convenience we have prepared a sample which can be downloaded from below link 
 
   
 
Refer our help documentation for your reference 
 
 
please get back to us if above solution does not resolve your query 
 
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon