יוסי הרטמן
yosef@haravdotnet.co.ilמדריך ליצירת טבלה (grid) בקלות באמצעות KENDO.
נכתוב קוד בסיסי ליצירת טבלה, ובהזדמנות נרחיב על אופציות נוספות.
ניצור את הטבלה בעזרת Angular, כמובן שאפשר גם בעזרת Jquery
דבר ראשון נוסיף את הסקריפים הבאים
Code Snippet
<link href=”~/Content/kendo.common.min.css” rel=”stylesheet” />
<link href=”~/Content/kendo.default.min.css” rel=”stylesheet” />
<link href=”~/Content/kendo.default.min.css” rel=”stylesheet” />
<script src=”~/Scripts/jquery-1.11.0.js”></script>
<script src=”~/Scripts/angular.js”></script>
<script src=”~/Scripts/kendo.all.min.js”></script>
היות ו-kendo משתמש ב-jquery , חובה להוסיף jquery,
יצרנו מערך בשם data שמכיל את הנתונים שנרצה להציג בטבלה,
javascript:
Code Snippet
angular.module(‘myApp’, [“kendo.directives”])
.controller(‘myGrid’, function ($scope) {
$scope.data = [
{id:1, name: ‘meir’, age: 25, email:‘meir@gmail.com’},
{id:2, name: ‘moshe’, age: 21, email: ‘moshe@gmail.com’},
{id:3, name: ‘shalom’, age: 33, email: ‘shalom@gmail.com’},
{id:4, name: ‘yosi’, age: 18, email: ‘yosi@gmail.com’}]
});
.controller(‘myGrid’, function ($scope) {
$scope.data = [
{id:1, name: ‘meir’, age: 25, email:‘meir@gmail.com’},
{id:2, name: ‘moshe’, age: 21, email: ‘moshe@gmail.com’},
{id:3, name: ‘shalom’, age: 33, email: ‘shalom@gmail.com’},
{id:4, name: ‘yosi’, age: 18, email: ‘yosi@gmail.com’}]
});
Html:
Code Snippet
<body ng-app=”myApp”>
<div ng-controller=”myGrid” class=”k-rtl col-md-4 col-md-offset-4″ >
<div ng-controller=”myGrid” class=”k-rtl col-md-4 col-md-offset-4″ >
<div kendo-grid K-data-source=”data”></div>
</div>
</body>
לא יאומן אבל זה התוצאה:
כמובן שזה ממש בסיסי ואפשר להרחיב / להוסיף / לשנות / למיין / לסנן וכו’, בעז”ה בהזדמנות