Skipping non-editable cells when tabbing in grid

5 posts, 0 answers
  1. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 10 Oct 2017 Link to this post

    Hi there, i am running into a bit of a problem. I want to tab through a batch edit grid and i have certain cells that are non-editable. I read in Telerik's documentation that for this to work, i have to remove "Navigatable()"  from grid. But if there is not event to attach to, how does the java script execute when i press the Tab key. Could this also be the reason whey i get the error "The grid is undefined." 

    Here is the JavaSript

    01.<script type="text/javascript">
    02.    var grid = $('#PlanPepole').data('kendoGrid');
    03. 
    04.    console.log("this is grid:", grid);
    05. 
    06.    grid.table.on('keydown', function (e) {
    07.        if (e.keyCode === kendo.keys.TAB && $($(e.target).closest('.k-edit-cell'))[0]) {
    08.            e.preventDefault();
    09.            var currentNumberOfItems = grid.dataSource.view().length;
    10.            var row = $(e.target).closest('tr').index();
    11.            var col = grid.cellIndex($(e.target).closest('td'));
    12. 
    13.            var dataItem = grid.dataItem($(e.target).closest('tr'));
    14.            var field = grid.columns[col].field;
    15.            var value = $(e.target).val();
    16.            dataItem.set(field, value);
    17.            var nextCellCol = 3;
    18. 
    19.            if (row >= 0 && row < currentNumberOfItems && col >= 0 && col < grid.columns.length) {
    20.                console.log("this is col:",col);
    21.                var nextCellRow;
    22.                if (col === 3) {
    23.                    nextCellCol = 4;
    24.                }
    25.                else if (col === 4) {
    26.                    nextCellCol = 5;
    27.                }
    28.                else if (col === 5) {
    29.                    nextCellCol = 6;
    30.                }
    31.                else if (col === 6) {
    32.                    nextCellCol = 7;
    33.                }
    34. 
    35.                if (e.shiftKey) {
    36.                    nextCellRow = nextCellCol === 3 ? row : row - 1;
    37.                } else {
    38.                    nextCellRow = nextCellCol === 3 ? row + 1 : row;
    39.                }
    40. 
    41.                if (nextCellRow >= currentNumberOfItems || nextCellRow < 0) {
    42.                    return;
    43.                }
    44. 
    45.                // wait for cell to close and Grid to rebind when changes have been made
    46.                setTimeout(function () {
    47.                    grid.editCell(grid.tbody.find("tr:eq(" + nextCellRow + ") td:eq(" + nextCellCol + ")"));
    48.                });
    49.            }
    50.        }
    51.    });
    52. 
    53.</script>

     

    Here is my code Index.cshtml

    01.@(Html.Kendo().Grid<P2I_UI.Models.ViewM.PlanPeopleVM>()
    02.    .Name("PlanPepole")
    03.    .Columns(columns =>
    04.    {
    05.        columns.Bound(e => e.PeopleCategoryName).Title("").Width(154);
    06.        columns.Bound(e => e.MinistryGroupCategoryName).Title("Ministry Group").Width(2);
    07.        columns.Bound(e => e.AgeCategoryName).Title("Age Category").Width(2);
    08.        columns.Bound(e => e.PeopleQ1).Title("Q1").Width(79);
    09.        columns.Bound(e => e.PeopleQ2).Title("Q2").Width(79);
    10.        columns.Bound(e => e.PeopleQ3).Title("Q3").Width(79);
    11.        columns.Bound(e => e.PeopleQ4).Title("Q4").Width(79);
    12.        columns.Bound(e => e.Annual).Width(79);
    13.    })
    14.    .ToolBar(toolbar =>
    15.    {
    16.        toolbar.Save();
    17.    })
    18.    .Editable(editable => editable.Mode(GridEditMode.InCell))
    19.    //.Navigatable()
    20.    .Events(events =>
    21.    {
    22.        events.DataBound("Ppg_Uneditable_ColandRow");
    23.        events.SaveChanges("disableBeforeUnload");
    24.        events.Edit("onEditPlanPepole");
    25.    })
    26.    .DataSource(dataSource => dataSource
    27.        .Ajax()
    28.        .ServerOperation(false)
    29. 
    30.        .Batch(true)
    31.        .Model(model =>
    32.        {
    33.            model.Id(p => p.PlanPeopleID);
    34.            model.Field(p => p.PeopleCategoryName).Editable(false);
    35.            model.Field(p => p.MinistryGroupCategoryName).Editable(false);
    36.            model.Field(p => p.AgeCategoryName).Editable(false);
    37.        })
    38.        .PageSize(30)
    39.        .Read(read => read.Action("People_Read", "PlanPeople"))
    40.    )
    41.)
  2. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 11 Oct 2017 in reply to Chinonso Link to this post

    Hi there, i have fixed the issue with the grid undefined. I simply places the javascript logic in a  function

     

    1.$(function () {
    2. 
    3.    -- Insert JS here ----
    4. 
    5.})

     

    Now the issue i am running into is that when , tab, it doesn't move to the next column. What could be the issue?

  3. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 11 Oct 2017 in reply to Chinonso Link to this post

    Ignore This Post!!!!!!!!!!!!

    Ignore This Post!!!!!!!!!!!!

    Ignore This Post!!!!!!!!!!!!

    Ignore This Post!!!!!!!!!!!!

     

    it is flawed. i will create a new one. Sorry for the inconvenience

  4. Preslav
    Admin
    Preslav avatar
    571 posts

    Posted 12 Oct 2017 Link to this post

    Hello,

    I am linking the other forum post for a reference if anyone from the community encounters the same issue. There, we will investigate the issue further.

    http://www.telerik.com/forums/skipping-non-editable-columns-when-tabbing-in-a-grid(grouped-and-aggregated) 

    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

    Posted 12 Oct 2017 in reply to Preslav Link to this post

    Thanks
Back to Top