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

13 posts, 1 answers
  1. Logan
    Logan avatar
    32 posts
    Member since:
    Apr 2013

    Posted 10 Sep 2013 Link to this post

    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
  2. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 12 Sep 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Traci
    Traci avatar
    12 posts
    Member since:
    Jan 2012

    Posted 12 Feb 2014 Link to this post

    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
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 14 Feb 2014 Link to this post

    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!
  6. ankit
    ankit avatar
    29 posts
    Member since:
    Sep 2008

    Posted 05 Feb 2015 in reply to Alexander Popov Link to this post

    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 ?
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 09 Feb 2015 Link to this post

    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!
     
  8. Jeff
    Jeff avatar
    1 posts
    Member since:
    Sep 2013

    Posted 20 Jul 2015 Link to this post

    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!

  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 21 Jul 2015 Link to this post

    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!
     
  10. Magnus
    Magnus avatar
    2 posts
    Member since:
    May 2015

    Posted 25 Aug 2015 in reply to Alexander Popov Link to this post

    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
  11. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 12 Oct 2015 Link to this post

    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 

  12. Blake
    Blake avatar
    18 posts
    Member since:
    Sep 2015

    Posted 26 Oct 2015 in reply to Gal Link to this post

    That's awesome, I was just about to start doing that when I came across your answer. Thank you for doing that for me.
  13. Magnus
    Magnus avatar
    2 posts
    Member since:
    May 2015

    Posted 19 Feb in reply to Gal Link to this post

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

    Awsome work.
  14. Khalil
    Khalil avatar
    1 posts
    Member since:
    Apr 2013

    Posted 18 Apr in reply to Logan Link to this post

    Can we do this for grids having Frozen Columns ?
Back to Top
Kendo UI is VS 2017 Ready