Grid Template Column tab input

[Aaron Khan]

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]

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. 

 

Video sample: https://www.syncfusion.com/downloads/support/forum/151135/ze/columtempl56483954.zip 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151135/ze/1511351317877706.zip 

 

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]

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]

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> 

 

Video demo: https://www.syncfusion.com/downloads/support/forum/151135/ze/1511351415559853.zip 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151135/ze/151135-1668367769.zip 

 

Regards,
Balaji Sekar.