Hello, I am evaluating the kendoui,
and tried to make a grid with virtual scrolling, which brings 7 items for every scroll. However, for some
reason I get all the data. Could you please tell me what's wrong with the following code? Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="MyCtrl">
<div kendo-grid k-options="gridOptions"></div>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope, $http) {
$scope.gridOptions ={
columns: [ { field: "ProductID" }, { field: "ProductName" } ],
//pageable: true,
scrollable:{
virtual: true
},
sortable: true,
dataSource: {
serverPaging: true,
pageSize: 7,
transport: {
read: function (e) {
$http.jsonp('http://demos.telerik.com/kendo-ui/service/Products?callback=JSON_CALLBACK')
.then(function success(response) {
e.success(response.data)
}, function error(response) {
alert('something went wrong')
console.log(response);
})
}
}
}
};
});
</script>
</body>
</html>
12 Answers, 1 is accepted
Thank you for contacting Telerik Support.
The problem in your example is the read method of the dataSource and the fact that you are retrieving all items. In order to allow the server paging to work correctly you need to allow the control to pass the current page information to the service:
transport: { read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"}And here is a dojo example:
If any other questions arise, please feel free to contact us again.
Regards,
Konstantin Dikov
Telerik
Rank 1
Thanks a lot for your answer.
Now I encounter different problem regarding resizable column: for some reason when setting 'resizable' to true, this doesnt work for me (i.e. columns headers are not resizable even though the cursor changes to "resize" icon). following is my configuration. Could you please tell what is wrong? Thanks in advance.
$scope.gridOptions = {
resizable: true,
scrollable:true,
sortable:true,
pageable:true,
selectable: "multiple",//multiple rows selection
navigatable: true,//For Accessibility
toolbar: "Example Peer Health Table",
columns:[{ template: "<input type='checkbox' class='checkbox' />",width:"30px" },//checkbox column in table
{title:"Name", field:"name"},
{title:"Discovery Method", field:"discoveryMethod"},
{title:"Protocols", field:"protocols", filterable:false},
{title:"FEP/FEP Group", field:"proxyNode", filterable:false},
{title:"Addresses", field:"addresses", filterable:false},
{title:"Health", field:"health"},
{title:"Status", field:"status"}
],
dataSource: {
pageSize: 8,
transport: {
read: function (e) {
$http.get('mockpeer.json')
.then(function success(response) {
e.success(response.data);
//alert('response received');
}, function error(response) {
alert('something went wrong')
console.log(response);
})
},
//dataType: 'json',
}
},
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
}
}
I am not able to replicate the issue in question with your settings. Following is the dojo example that I have tested:
If the issue persists, please create a dojo example that replicates the problem, so we can inspect it locally.
Best Regards,
Konstantin Dikov
Telerik
Rank 1
Hi, Nothing appears on the link you posted.
Please try the following link instead:
And just in case, here is the code:
<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/grid/angular"> <style> html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } </style> <title></title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"> <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script></head><body> <div id="example" ng-app="KendoDemos"> <div ng-controller="MyCtrl"> <kendo-grid options="mainGridOptions"> </kendo-grid> </div> </div> <script> angular.module("KendoDemos", ["kendo.directives"]) .controller("MyCtrl", function ($scope) { $scope.mainGridOptions = { resizable: true, scrollable: true, sortable: true, pageable: true, selectable: "multiple",//multiple rows selection navigatable: true,//For Accessibility toolbar: "Example Peer Health Table", dataSource: { type: "odata", serverPaging: true, pageSize: 7, transport: { read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" } }, scrollable: { virtual: true }, sortable: true, columns: [ { template: "<input type='checkbox' class='checkbox' />", width: "30px" }, { field: "OrderID", title: "Order ID", width: 80 }, { field: "CustomerID", title: "Customer ID", width: 80 }, { field: "ShipName", title: "Ship Name", width: 180 }, { field: "ShipAddress", title: "Ship Address" }, { field: "ShipCity", title: "Ship City", width: 160 }, { field: "ShipCountry", title: "Ship Country", width: 160 } ] }; }) </script></body></html>Regards,
Konstantin Dikov
Telerik
Rank 1
Hi, thanks again.
Just to ensure, did you check that this works with 1.4.8. angular version?
The example works with AngularJS 1.4.8 version as well. You could replace the angular.js file reference from the previous example with the following line and test it on your side:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>Best Regards,
Konstantin Dikov
Telerik
Rank 1
Since I am not able to replicate such problem on my side in any browser, please create a dojo example that replicates the issue in question and provide detailed steps-to-reproduce. You could also elaborate on which browser you are observing the problem.
I am looking forward to your reply.
Regards,
Konstantin Dikov
Telerik
Rank 1
Hi, I guess a possible reason is that there are file conflicts since the project uses bower but the full kendo trial cannot be installed via bower. Could you please tell if such conflicts indeed cause problems in kendo's behaviour and if so, how correctly overcome it.(by the way, same problem appears in kendo splitter, i.e. i can resize only once the page is loaded, then it stops working).. I try to use the following dependecies:
<script type="text/javascript" src="kendo/js/jquery.min.js"></script>
<script type="text/javascript" src="kendo/js/angular.min.js"></script>
<script type="text/javascript" src="kendo/js/kendo.all.min.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
<script type="text/javascript" src="../bower_components/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="../bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="../bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="../bower_components/d3/d3.js"></script>
<script type="text/javascript" src="../bower_components/c3/c3.js"></script>
<script type="text/javascript" src="../bower_components/ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="../bower_components/angular-ui-layout/src/ui-layout.js"></script>
<script type="text/javascript" src="../bower_components/angular-bootstrap-nav-tree/dist/abn_tree_directive.js"></script>
thanks in advance
Rank 1
Since you are loading the other JS files after you load the Kendo files, there could be some issue caused by the third party scripts. For testing purposes you could try to remove all other references and see if the issue will be resolved. You could also try to add the Kendo files after the other files.
Regards,
Konstantin Dikov
Telerik