Skip read only fields when using keyboard navigation on navigatable grid in batch edit mode

[Logan]

I have a large grid that is in batch edit mode with only one or possibly two editable columns.  It is very important that the user can use keyboard navigation to move through the editable columns without using their mouse. 
I have a grid with navigatable turned on, but my problem is that it moves through all of the columns, not just the editable columns.  Is there a way to skip the columns that are not editable?

I am using MVC, but I have put together a quick sample on jsFiddle here: http://jsfiddle.net/jSeMZ/1/

Thanks!
~Logan

[Alexander Popov]

Hello Logan,

This functionality is not supported out of the box, however similar behavior could be achieved by attaching custom keydown event handler to the Grid's table. For convenience I prepared a small example that uses the following approach:

1. Add "editable-cell" class to all editable cells
2. Attach a keydown event handler to the Grid table
3. When the event is triggered check if the TAB key was pressed and if it was - search for the closest cell that has "editable-cell" class
4. Move the focus to that cell and make it editable

Please keep in mind that this demo has certain limitations (i.e no SHIFT+TAB support) and its goal is to give you a direction, not a custom solution as we do not provide such.

Regards,
Alexander Popov
Telerik

[Traci]

function SurveyStoresSurveyResponsesItemsDataBound() {

        var grid = $("#SurveyStoresSurveyResponsesItems").data("kendoGrid");
     $(grid.tbody).on("keydown", "td", function (e) {
            if (e.keyCode === kendo.keys.TAB) {
                var current = grid.current();
                dumpObject(current);
                if (!current.hasClass("editable-cell")) {
                    var nextCell = current.nextAll(".editable-cell");
                    if (!nextCell[0]) {
                        //search the next row
                        var nextRow = current.parent().next();
                        var nextCell = current.parent().next().children(".editable-cell:first");
                    }
                    grid.current(nextCell);
                    grid.editCell(nextCell[0])
                }
            }
        });
}

 <div id="AllStoresSurveyResponsesGrid">
        @(Html.Kendo().Grid<SurveyMaintenance.Models.ItemStoreSurveyResponseAttributes>()
            .Name("SurveyStoresSurveyResponsesItems")
            .HtmlAttributes(new { ID = "SurveyStoresSurveyResponsesItems", Class = "k-grid-header" })
            .Navigatable()
            .Columns(columns =>
            {
                columns.Bound(o => o.Store)
                    .Width(50);
                columns.Bound(o => o.OH)
                    .Width(50);
                columns.Bound(o => o.QTY).EditorTemplateName("QTYItemEditor")
                    .Width(50).HtmlAttributes( new { Class="editable-cell" });
            } )
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Resizable(resize => resize.Columns(true))
            .Events(events => events.DataBound("SurveyStoresSurveyResponsesItemsDataBound").Edit("SurveyItemReponsesEditCell"))
            .Scrollable(scr => scr.Height("auto"))
            //http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/configuration
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                        .Events(events => {
                            events.Error("grid_error_handler");
                        })
                .ServerOperation(false)
                .Model(model => {
                    model.Id(p => p.StoreSurveyId);

                })
                .Read(read => read.Action("GetSurveyStoreSurveyResponseItems", "Survey").Data("additionalSurveyStoreResponseItems"))
            )
        )
        </div>

Can you please how can this be acheived by MVC wrapper as I am not able to get this

[Alexander Popov]

Hello Traci,

I noticed that the keydown event is attached differently. Try using the following: 

$("#SurveyStoresSurveyResponsesItems").find("table").on("keydown", function(){...});

Regards,
Alexander Popov
Telerik

[ankit]

Hi Alexander

Your reply is good enough.
However, it doesn't work after last row, last cell TAB. I believe it should keep going in grid. Anyway, that's what I want to replicate anyway.

Any modification suggestions ?

[Alexander Popov]

Hi Ankit,

You can check if the nextCell selector finds anything and if it does not - find the first editable cell in the Grid. Here is an updated example.

Regards,
Alexander Popov
Telerik

 

 

[Jeff]

Our users require the same support (TAB and Shift+TAB should skip non-editable columns).  Is this still the most recent/current workaround approach to this issue?  Or perhaps a newer version of Kendo UI has addressed this as an option?

Please advise when possible.

Thanks!

[Alexander Popov]

Hello Jeff,

There are no changes in that regard yet. I would encourage you to submit a feature request on our feedback portal.

Regards,
Alexander Popov
Telerik

 

 

[Magnus]

I've been modifying the script that you provided and have achieved everything I want with one exception.
I'm unable to change the key that is being used to enter.
Any help with this will be greatly appreciated.

Best regards

[Gal]

Hi I have played around with the script and here is a version that supports Tab/SHift Tab/Tab Prev Line/​Tab Next line.

http://jsbin.com/pifevi/1/edit?html,output 

Enjoy 

[Blake]

That's awesome, I was just about to start doing that when I came across your answer. Thank you for doing that for me.

[Magnus]

Thank you so much. For some reason I did not get a notification about this.

Awsome work.

[kishore]

Can we do this for grids having Frozen Columns ?