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

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

    Posted 11 Oct 2017 Link to this post

    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.

     

  2. Preslav
    Admin
    Preslav avatar
    574 posts

    Posted 12 Oct 2017 Link to this post

    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
    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.
  3. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

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

    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'));
  4. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

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

    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>
     
     
    <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

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

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

    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

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

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

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

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

     

    Thank you

  7. Preslav
    Admin
    Preslav avatar
    574 posts

    Posted 16 Oct 2017 Link to this post

    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:
    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
    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.
  8. Chinonso
    Chinonso avatar
    48 posts
    Member since:
    Jan 2017

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

    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

  9. Preslav
    Admin
    Preslav avatar
    574 posts

    Posted 18 Oct 2017 Link to this post

    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
    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.
Back to Top