Skipping non-editable columns when tabbing in a grid(Grouped And Aggregated)

[Chinonso]

Hi there,I want to tab through a batch edit grid and i have certain columns that are non-editable (unamed column, Ministry Group, Age Category And Annual ( i use e.closeCell in javascript for the Annual column) ). Right now, i am able to Tab through the grid though partially. The problems i am running into is

1.) When i tab through the grouped section (People Reached) of the grid, it works fine but any thing past the first 3 rows and  tabbing no longer works.

So my question ultimately is how do i make it jump to the next grouped section(People Trained) and Tab through and so on and so forth.

 

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).ClientGroupFooterTemplate("Total");
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).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
09.        columns.Bound(e => e.PeopleQ2).Title("Q2").Width(79).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
10.        columns.Bound(e => e.PeopleQ3).Title("Q3").Width(79).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
11.        columns.Bound(e => e.PeopleQ4).Title("Q4").Width(79).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
12.        columns.Bound(e => e.Annual).Width(79).ClientGroupFooterTemplate("#=kendo.toString(sum,',0')#");
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.        .Aggregates(aggregates =>
30.        {
31.            aggregates.Add(p => p.PeopleCategoryName).Count();
32.            aggregates.Add(p => p.PeopleQ1).Sum();
33.            aggregates.Add(p => p.PeopleQ2).Sum();
34.            aggregates.Add(p => p.PeopleQ3).Sum();
35.            aggregates.Add(p => p.PeopleQ4).Sum();
36.            aggregates.Add(p => p.Annual).Sum();
37.        })
38.        .Batch(true)
39.        .Model(model =>
40.        {
41.            model.Id(p => p.PlanPeopleID);
42.            model.Field(p => p.PeopleCategoryName).Editable(false);
43.            model.Field(p => p.MinistryGroupCategoryName).Editable(false);
44.            model.Field(p => p.AgeCategoryName).Editable(false);
45.        })
46.        .PageSize(30)
47.        .Group(groups => groups.Add(p => p.PeopleCategoryID))
48.        .Read(read => read.Action("People_Read", "PlanPeople"))
49.    )
50.)

 

JavaScrpt

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

 

And i also attached an image of the grid

Thank you.

 

[Preslav]

Hi Chinonso,

In the provided code, I was not able to locate the definition of the col variable. Thus, I am not sure how to workaround the current behavior.

 Additionally, it would help me a lot to fully understand the logic if you could provide a sample runnable project or a Dojo that clearly demonstrates the scenario.

Having said that, could you please send that runnable example with your next post? 

I look forward to hearing from you.


Regards,
Preslav
Progress Telerik

[Chinonso]

Oh sorry, here it is. Also, i will try making in runnable version in Dogo.

 

1.var currentNumberOfItems = grid.dataSource.view().length;
2.var row = $(e.target).closest('tr').index();
3.var col = grid.cellIndex($(e.target).closest('td'));

[Chinonso]

Hello there Preslav, as requested, here is a runnable version of the code in Dojo

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.3.913/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script></head>
<body>
</body>
  <p>The "gender" column is not editable and is skipped during tabbing:</p>
  <div id="grid"></div>
  <script>
    $("#grid").kendoGrid({
      columns: [
        //{ field: "PeopleID" },
        { field: "PeopleCategory", title:" ", aggregates: ["count"],groupFooterTemplate:"Total:#=count#" },
        //{ field: "PeopleCategoryID" },
        { field: "MinistryGroup" },
        { field: "AgeCategory" },
        { field: "PeopleQ1", aggregates: ["sum"],groupFooterTemplate:"#=sum#" },
        { field: "PeopleQ2", aggregates: ["sum"],groupFooterTemplate:"#=sum#" },
        { field: "PeopleQ3", aggregates: ["sum"],groupFooterTemplate:"#=sum#" },
        { field: "PeopleQ4", aggregates: ["sum"],groupFooterTemplate:"#=sum#" },
        { field: "Annual", aggregates: ["sum"],groupFooterTemplate:"#=sum#" }
      ],
      dataSource: {
        data: [
          { PeopleID: 1, PeopleCategory:"People Reached", PeopleCategoryID:1, MinistryGroup: "General", AgeCategory: "Adult", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 },
          { PeopleID: 2, PeopleCategory:"People Reached", PeopleCategoryID:1, MinistryGroup: "General", AgeCategory: "Youth", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 },
          { PeopleID: 3, PeopleCategory:"People Reached", PeopleCategoryID:1, MinistryGroup: "General", AgeCategory: "Children", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 },
          { PeopleID: 4, PeopleCategory:"People Trained", PeopleCategoryID:2, MinistryGroup: "General", AgeCategory: "General", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 },
          { PeopleID: 5, PeopleCategory:"People Trained", PeopleCategoryID:2, MinistryGroup: "General", AgeCategory: "General", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 },
          { PeopleID: 6, PeopleCategory:"Student Completeion", PeopleCategoryID:3, MinistryGroup: "General", AgeCategory: "Adult", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 },
          { PeopleID: 7, PeopleCategory:"Student Completeion", PeopleCategoryID:3, MinistryGroup: "General", AgeCategory: "Youth", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 },
          { PeopleID: 8, PeopleCategory:"Student Completeion", PeopleCategoryID:3, MinistryGroup: "General", AgeCategory: "Children", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 },
          { PeopleID: 9, PeopleCategory:"Other", PeopleCategoryID:4, MinistryGroup: "General", AgeCategory: "General", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 },
          { PeopleID: 10, PeopleCategory:"Other", PeopleCategoryID:4, MinistryGroup: "General", AgeCategory: "General", PeopleQ1: 0, PeopleQ2: 0, PeopleQ3: 0,PeopleQ4: 0,Annual: 0 }
        ],
        schema: {
          model: {
            id: "PeopleID",
            fields: {
              PeopleCategory: {
                editable: false
              },
              PeopleCategoryID: {
                editable: false
              },
              MinistryGroup: {
                editable: false
              },
              AgeCategory: {
                editable: false
              }
            }
          }
        },
        group: {
          field: "PeopleCategoryID", aggregates: [
            { field: "PeopleCategory", aggregate: "count" },
            { field: "PeopleQ1", aggregate: "sum"},
            { field: "PeopleQ2", aggregate: "sum"},
            { field: "PeopleQ3", aggregate: "sum"},
            { field: "PeopleQ4", aggregate: "sum"},
            { field: "Annual", aggregate: "sum"}
          ]
        },
        aggregate: [ { field: "PeopleCategory", aggregate: "count" },
                    { field: "PeopleQ1", aggregate: "sum" },
                    { field: "PeopleQ2", aggregate: "sum" },
                    { field: "PeopleQ3", aggregate: "sum" },
                    { field: "PeopleQ4", aggregate: "sum" },
                    { field: "Annual", aggregate: "sum" }]
      },
      editable: {
        mode: "incell"
      },
      dataBound:function(e){
        //alert("hey hey hey!!!");
        $(".k-grouping-row").css("display", "none");
      },
      groupable: true,
    });
    var grid = $('#grid').data('kendoGrid');

    grid.table.on('keydown', function(e) {
      if (e.keyCode === kendo.keys.TAB && $($(e.target).closest('.k-edit-cell'))[0]) {
        e.preventDefault();
        var currentNumberOfItems = grid.dataSource.view().length;
        var row = $(e.target).closest('tr').index();
        var col = grid.cellIndex($(e.target).closest('td'));

        var dataItem = grid.dataItem($(e.target).closest('tr'));
        var field = grid.columns[col].field;
        var value = $(e.target).val();
        dataItem.set(field, value);

        var nextCellCol = 3;
        console.log(" grid.columns.length:", grid.columns.length)
        if (row >= 0 && row < currentNumberOfItems && col >= 0 && col < grid.columns.length) {
          console.log("this is col:", col);
          console.log("this is row:", row);
          var nextCellRow;
          if (col === 3) {
            nextCellCol = 5;
          }
          else if (col === 4) {
            nextCellCol = 6;
          }
          else if (col === 5) {
            nextCellCol = 7;
          }
          else if (col === 6) {
            nextCellCol = 4;
          }

          if (e.shiftKey) {
            nextCellRow = nextCellCol === 4 ? row : row - 1;
          } else {
            nextCellRow = nextCellCol === 4 ? row + 1 : row;
          }

          if (nextCellRow >= currentNumberOfItems || nextCellRow < 0) {
            return;
          }

          // wait for cell to close and Grid to rebind when changes have been made
          setTimeout(function () {
            grid.editCell(grid.tbody.find("tr:eq(" + nextCellRow + ") td:eq(" + nextCellCol + ")"));
          });
        }
      }
    });
  </script>
</body>
</html>

 

Thanks

[Chinonso]

Hi again, the code above works, but the code in the link below is a match for what i have in Asp.Net Mvc

Current Version

[Chinonso]

For some reason the link is not working. here it is 

http://dojo.telerik.com/@cmaduakolam/ateqE

 

Thank you

[Preslav]

Hello Chinonso,

Thank you for providing the runnable example.

During my investigation, I determined that the problem comes from this line:

var currentNumberOfItems = grid.dataSource.view().length;

In a normal grid, the above line will return the number of all records, however, in a grouped grid, this will return the number of groups. In this case - 4.

Having said that, by removing this line and all the checks relevant to it, I was able to achieve a behavior similar to the desired one. Please, find my testing Dojo here:

• http://dojo.telerik.com/Atiba/2

For next steps, you might want to add additional logic to make the shift+tab combination to work in a reverse to the above order.

Please, check the above Dojo and let me know if I can assist you with any further information.


Regards,
Preslav
Progress Telerik

[Chinonso]

Thanks a lot man. that did the trick. I also when a little further to modify the code. I forgot to mention in the post that the number of rows in each group is dynamic. But your solution contained the necessary logic. So, making it dynamic was not a problem. 

http://dojo.telerik.com/@cmaduakolam/EGiZU

 

Thanks

[Preslav]

Hi Chinonso,

I am glad to hear that the issue is now resolved.

Additionally, many thanks for sharing the final solution with the community.


Regards,
Preslav
Progress Telerik