This is a migrated thread and some comments may be shown as answers.

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

12 Answers 507 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Logan
Top achievements
Rank 1
Veteran
Logan asked on 10 Sep 2013, 02:34 PM
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

12 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Popov
Telerik team
answered on 12 Sep 2013, 02:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Traci
Top achievements
Rank 1
answered on 12 Feb 2014, 05:32 PM
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"))
            .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
0
Alexander Popov
Telerik team
answered on 14 Feb 2014, 10:38 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
ankit
Top achievements
Rank 1
answered on 05 Feb 2015, 11:22 PM
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 ?
0
Alexander Popov
Telerik team
answered on 09 Feb 2015, 12:19 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jeff
Top achievements
Rank 1
answered on 20 Jul 2015, 09:06 PM

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!

0
Alexander Popov
Telerik team
answered on 21 Jul 2015, 08:47 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Magnus
Top achievements
Rank 1
answered on 25 Aug 2015, 09:52 AM
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
0
Gal
Top achievements
Rank 2
answered on 12 Oct 2015, 08:12 AM

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 

0
Blake
Top achievements
Rank 2
answered on 26 Oct 2015, 06:19 PM
That's awesome, I was just about to start doing that when I came across your answer. Thank you for doing that for me.
0
Magnus
Top achievements
Rank 1
answered on 19 Feb 2016, 01:11 PM
Thank you so much. For some reason I did not get a notification about this.

Awsome work.
0
kishore
Top achievements
Rank 2
answered on 18 Apr 2016, 11:02 AM
Can we do this for grids having Frozen Columns ?
Tags
Grid
Asked by
Logan
Top achievements
Rank 1
Veteran
Answers by
Alexander Popov
Telerik team
Traci
Top achievements
Rank 1
ankit
Top achievements
Rank 1
Jeff
Top achievements
Rank 1
Magnus
Top achievements
Rank 1
Gal
Top achievements
Rank 2
Blake
Top achievements
Rank 2
kishore
Top achievements
Rank 2
Share this question
or