Print a Kendo UI grid with pagination

So I wanted to print a page that has a Kendo ui grid with pagination activated, but I didn’t want to remove the pagination on the page.

I found those two posts that helped me

http://www.telerik.com/forums/print-all-pages-in-a-grid

http://stackoverflow.com/questions/18325025/how-to-detect-window-print-finish

And I ended with this


(function () {

var pageSize = 0;
 var beforePrint = function () {

 // remove paging on grid
 if ($(".k-grid").length > 0) {
 var dataSource = $(".k-grid").data("kendoGrid").dataSource;
 pageSize = dataSource.options.pageSize; // save the current page size
if(pageSize !== undefined){
 dataSource.pageSize(dataSource.total()); // set the size to the number of items
}
 }

};

var afterPrint = function () {

// set paging back
 if ($(".k-grid").length > 0 && pageSize > 0) {
 var dataSource = $(".k-grid").data("kendoGrid").dataSource;
 dataSource.pageSize(pageSize);
 }
 };

// chrome
 if (window.matchMedia) {
 var mediaQueryList = window.matchMedia('print');
 mediaQueryList.addListener(function (mql) {
 if (mql.matches) {
 beforePrint();
 } else {
 afterPrint();
 }
 });
 }

// FF & IE
 //https://developer.mozilla.org/en-US/docs/Web/API/window.onbeforeprint
 window.onbeforeprint = beforePrint;
 window.onafterprint = afterPrint;

}());

Hope it helps someone

Incoming search terms:

  • kendo ui pagination
  • kendo ui print
  • kendo ui chart print
  • print kendo grid
  • kendogrid number page total
  • print_pagination
  • live disable pagination kendo grid
  • kendo ui page size 0
  • Kendo Grid Pagination
  • remove kendo grid

5 comments

  1. Dhruv Gupta says:

    I’m unable to implement this in my print plugin please help. Thank you.

  2. admin says:

    Hi,
    Kendo UI and bootstrap doesn’t have the same purpose
    Kendo UI is really great because it comes with .NET wrappers that make the development quicker

    Actually I’m using both bootstrap and Kendo UI in my applications : they are working great together.

    I’m using bootstrap for the pages layout and kendo for the controls : grid, datepickers, charts, …

  3. joseph says:

    I was using KendoUI before. But I find twitter bootstrap easier and less work

  4. Sankar says:

    Nice its working ………………Thank u so much

  5. Atish says:

    m not getting, how to use above method in my printing code. pls help me..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>