CODEWITHSUNDEEP
kendo-uikendo-gridkendo-asp.net-mvc
gee'K'iran
gee'K'iran

Reputation: 441

Column level vertical paging in kendo grid

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.

Upvotes: 0

Views: 510

Answers (1)

David Shorthose
David Shorthose

Reputation: 4497

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.

Upvotes: 1

Related Questions