Column level vertical paging in kendo grid

Question

I have a requirement such that: Display 18 columns of data into a kendo grid. However, the columns should be paginated. That means by default on page load first 6 columns will be displayed and page numbers of 2 and 3 will be displayed. If I click page 2 grid will show column 7 to column 12 and page 3 displays column 13 to column 18. Is there any implicit feature available in Kendo UI grid. I am v.new to Kendo. Can some body throw some light/ ideas please?

I am using Kendo on Asp.Net Mvc 5, do I need to go for some server side implementation?

Thanks in advance.

Will you also need to page through the results "row" dataset as well. eg. will you have more rows of data than your pagesize? You will have to implement this yourself as the default paging mechanisms will go through rows rather than columns and you will also have to handle the column rebinding/ (hiding/showing). In your situation is the Grid control actually the right thing for what you need to achieve? If you are only showing one row at a time then why not use a nice looking form that can be paged through? Some more context to the problem domain may help get a useful/ detailed answer. — David Shorthose
Alternatively why not show a summary of the "row" with the most important columns and then have a pop up for the "detailed" view of the data. This may be a more suitable solution for you, again this all depends on what it is you are want to achieve with this solution. — David Shorthose
@DavidShorthose Thanks for the response. Yes, I will even have row wise pagination within the same grid. I am trying to implement through column count and visible show/hidden based on column page count. However I just want to check if any better idea, is there built in support available from Kendo Grid. — gee'K'iran
There isn't built in support for "Column" pagination but you could implement a toolbar that allowed this kind of feature. to show/hide columns via the click of a button. But this may be a bit "clunky" from a user's perspective. I am happy to prepare a dojo for you if that's what you want. Will the number of columns always be 18 or will it vary? — David Shorthose
Appreciate your help and support. Number of columns will vary, I gave 18 as an example. The toolbar implementation would be perfect for my requirement. We are not worried about user's experience as it being an enterprise application, and the users will be trained on usage. I will also try from my end and will update in case I am successful. — gee'K'iran

David Shorthose David Shorthose · Accepted Answer · 2015-08-04T11:50:14

I have prepared a sample dojo that hopefully will show this type of functionality. It may not be quite what you want but gives you the basic ground work to develop something more suitable for your needs. Hide Columns in Groups

I have basically taken one of the Kendo demos and modified it to show the functionality.

I have created two groups of columns (columnGroup1, columnGroup2) with these groups I then have button that is configured to show and hide the columns contained in these groups.

To ensure I have tagged the columns correctly I have added a data-* attribute to the headers like so:

{field: "UnitPrice", 
title: "Unit Price", 
format: "{0:c}", 
width: "130px", 
headerAttributes:{ 
                   "data-type":"columnGroup1"
                 }
}

By doing this I can then simply wire up a button like so:

<button data-type="columnGroup1" data-mode="show">Hide Group 1</button>

by tagging the buttons in my sample with the group name then I can easily pick which columns should be shown/hidden when clicked.

Then the magic bit happens here:

    $('button[data-type]').on('click', function (e) {
     e.preventDefault();

     var mode = $(this).data("mode");

     var type = $(this).data("type");

     showHideColumns(type, mode === "hide");

     if (mode === "hide") {
         $(this).text("Show " + type)
         $(this).data("mode", "show");
     } else {
         $(this).text("Hide " + type)
         $(this).data("mode", "hide");
     }
 });


 });



 function showHideColumns(group, mode) {

     //if mode = true then we are to show the columns
     //if mode = false then we are the hide the columns 
     var grid = $('#grid').data("kendoGrid");
     var columns = $('th[data-type="' + group + '"]');
     if (!mode) {
         //this is where we will hide the grid headers.
         columns.each(function (me) {
             grid.hideColumn($(this).data("field"));
         });

     } else {
         columns.each(function (me) {
             grid.showColumn($(this).data("field"));

         });

     }


     console.log(group, mode);
 }

I bind a click event to the buttons that have the data-type="xxx" and then check to see if the button should be showing or hiding the columns depending on the data-mode=show/hide setting. With this I then push the action to the showHideColumns function and this will then hide or show those columns that have been set up in that columnGroup.

Hopefully this gets you going but if you need the demo tweaking/ more explanation on this then let me know.

Column level vertical paging in kendo grid

1 Answers