Last active
February 3, 2017 00:58
-
-
Save sunilmurali/edf59fb66d8ec0a28c5445ff719e456b to your computer and use it in GitHub Desktop.
KendoGrid test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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