javascript - Clear data in kendo ui grid -
hello read article use kendoui
grid angularjs
directive , create sample project
use directive grid :
<div kendo-grid="kendo.cargrid" k-options="maingridoptions"></div>
my problem when click set new data button
, grid showing data , next click clear data button
, grid clear data , next click again set new data button
grid doesn't show data
whats wrong it? did forgot?
<!doctype html> <html> <head> <meta charset="utf-8"> <title>untitled</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script></head> <body> <div id="example" ng-app="kendodemos"> <div ng-controller="myctrl"> <button ng-click="newdata()">set new data </button> <button ng-click="cleardata()">clear data </button> <div kendo-grid="kendo.cargrid" k-options="maingridoptions"></div> </div> </div> <script> angular.module("kendodemos", [ "kendo.directives" ]) .controller("myctrl", function($scope){ $scope.onchange = function(selected,data,dataiteam,angulardataitem) { console.log("selected: "+ selected.selected,data,dataiteam,angulardataitem); console.log("data: ", data); console.log("dataiteam: ", dataiteam); console.log("angulardataitem: ", angulardataitem); } $scope.cleardata=function(){ var grid = $scope.kendo.cargrid; var datasource = grid.datasource; //alert(datasource); datasource.data([]);//clear out old data }; $scope.newdata=function(){ $scope.maingridoptions = { datasource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/northwind.svc/employees" }, pagesize: 5, serverpaging: true, serversorting: true }, selectable:true, columns: [{ field: "firstname", title: "first name", width: "120px" },{ field: "lastname", title: "last name", width: "120px" }] }; }; }) </script> </body> </html>
Comments
Post a Comment