Skip to content

Instantly share code, notes, and snippets.

@sunilmurali

sunilmurali/grid add pager on top

Last active February 3, 2017 00:58
Show Gist options
  • Save sunilmurali/edf59fb66d8ec0a28c5445ff719e456b to your computer and use it in GitHub Desktop.
Save sunilmurali/edf59fb66d8ec0a28c5445ff719e456b to your computer and use it in GitHub Desktop.
Download ZIP
KendoGrid test
Raw
grid add pager on top
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
// fiddle: https://jsfiddle.net/sunilmurali/z5df0of0/
var base = kendo.ui.Grid;
var Grid1 = kendo.ui.Grid.extend ( {
init: function (element, options) {
base.fn.init.call(this, element, options);
this.repeatPagerTop = options.repeatPagerTop;
console.log ( 'repeatPagerTop : ' + this.repeatPagerTop );
if ( this.repeatPagerTop ) {
var pagerElName = this.getUniqueName ();
$(element).find('.k-grid-header').prepend ('<div class="' + pagerElName +'"/>');
$('.' + pagerElName).kendoPager({
dataSource: this.dataSource,
pageSizes: options.pageable,
input: true,
numeric: false
});
}
},
getUniqueName: function () {
return 'test-pager';
},
} );
kendo.ui.plugin(Grid1);
$("#grid").kendoGrid({
selectable: "multiple cell",
navigatable: true,
allowCopy: true,
columns: [
{ field: "productName" },
{ field: "category" }
],
repeatPagerTop: true,
pageable: {
pageSize: 2,
input: true,
numeric: false
},
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
]
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment