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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Template Column tab input

Thread ID:

Created:

Updated:

Platform:

Replies:

151135 Jan 31,2020 06:21 PM UTC Feb 7,2020 07:35 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Aaron Khan
Asked On January 31, 2020 06:21 PM UTC

I have a grid with a template column that is an input box and I would like to be able to tab to the next input which doesn't seem to be working. If I press tab nothing happens however if I press enter then tab it starts to tab properly for some reason. Any ideas?

Balaji Sekar [Syncfusion]
Replied On February 3, 2020 11:06 AM UTC

Hi Aaron, 
 
Greetings from syncfusion support. 
 
Based on your query, we have prepared a sample and render a input box in a column. Then we have pressed the tab key to focus the next input filed to reproduce the issue but it works fine from our end. Please refer the below video sample and sample for more information. 
 
 
 
If you still have the issue, Please share the below details that will be helpful for us to provide better solution 
 
  1. Please confirm your package version.
  2. Share the issue replication procedure step by step.
  3. Please confirm if you are customizing keyboard keys in any keyboard events.
  4. Please share your issue scenario in video demonstration.
  5. If possible please reproduce the issue with our above attached sample.
 
Regards, 
Balaji Sekar. 


Aaron Khan
Replied On February 5, 2020 05:17 PM UTC

What if I only have one input per row and on tab I want it to jump to the input on the next row instead of the next cell? Doing this in jquery causes it to jump to the input on the next row and then immediately focus back on the previous row cell. here is an example script you can add to your project to make this happen.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script type="text/javascript">
       $("#Grid").on("keydown", function (e) {
                var keycode = e.keyCode || e.which;
                if (keycode == 9 || keycode == 13) {
                    e.preventDefault();
                    e.stopPropagation();
                    var input = $(e.target).closest("tr").next("tr").find(".list");
                    if (input.length === 0) {
                        input = $(".e-gridcontent .e-content .e-table input[type='text']")[0];
                    }
                    input.focus();
                }
            });

Balaji Sekar [Syncfusion]
Replied On February 7, 2020 07:35 AM UTC

Hi Aaron, 
 
Thanks for the update. 
 
Query#: on tab I want it to jump to the input on the next row instead of the next cell? 
 
If you want to jump to the next row input field by pressing Tab key , First you have to prevent the default behavior which was focusing the next td cell. To prevent the default behavior you have to call stopImmediatePropagation() method.This method was used to stop the rest of the event handlers from being executed for the selected element. After preventing the default behavior while pressing Tab key it will automatically focus the next input field based on the default browser behavior so you need not focus the input element. Please refer the below code example, video demo and sample for more information. 
 

<div class="control-section"> 
    @( 
            @Html.EJS().Grid<gridmvclocalization.Controllers.OrdersDetails>("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
            { 
                .  .  .  .  .  .  .  . 
               col.HeaderText("Inupt1").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Template("#template").Width("160").Add(); 
                .  .  .  .  .  .  .  . 
 
            }).AllowPaging().QueryCellInfo("template").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).PageSettings(page => page.PageCount(2)).Render() 
    ) 
</div> 
 
<script type="text/x-template" id="template"> 
 
    <input type="text" class="list" id="OrderID${OrderID}" /> 
 
</script> 
 
<script> 
    document.getElementById("Grid").addEventListener("keydown", function (args) { 
        if (args.keyCode === 9 && args.key === "Tab") { 
            args.stopImmediatePropagation(); 
        } 
    }); 
</script> 
 
 
<script type="text/javascript"> 
    function template(args) { 
        if (args.column.headerText === "Inupt1") { 
            var ele = args.cell.querySelector('.list'); 
            var inputtext = new ej.inputs.TextBox({ 
                value: args.data.ShipCountry, 
                floatLabelType: 'Auto' 
            }); 
            inputtext.appendTo(ele); 
        } 
    } 
</script> 

 
 
 
Regards,
Balaji Sekar. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon