kendo-grid учебник
Начало работы с кендо-сеткой
Поиск…
замечания
Сетка Kendo UI - мощный виджет, который позволяет визуализировать и редактировать данные через представление таблицы. Он предоставляет множество опций о том, как представлять и выполнять операции над базовыми данными, такими как пейджинг, сортировка, фильтрация, группировка, редактирование и т. Д. Чтобы подавать сетку с данными, вы можете предоставлять локальные или удаленные данные через Kendo Компонент UI DataSource, используемый в качестве медиатора.
Dojo (вы можете сделать онлайн-демонстрацию и поделиться ею с другими)
Установка или настройка
Мы можем добавить сетку Kendo-UI в HTML5 / Javascript, ASP.NET MVC, JSP и проект / приложение PHP.
Чтобы добавить сетку kendo-UI на странице HTML5, выполните следующие шаги.
Создайте пустую страницу html5.
Включите kendo.common.min.css и kendo.default.min.css . Добавьте тег ссылки в тег заголовка.
Библиотека Kendo-UI зависит от JQuery. Итак, после jQuery укажите kendo.all.min.js и kendo.aspnetmvc.min.js.
Существует два возможных способа создания экземпляра сетки пользовательского интерфейса Kendo.
- Из пустого элемента div. В этом случае все настройки Grid содержатся в инструкции сценария инициализации.
- Из существующего элемента таблицы HTML. В этом случае некоторые параметры Grid можно определить из атрибутов таблицы и элементов HTML.
В обоих случаях сетка регистрируется как плагин jQuery.
Вы можете найти путь cdn здесь для вышеупомянутых файлов.
Пример: сетка Kendo-UI на странице HTML5 - пустой элемент div
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script>
var products = [{
ProductID: 11,
ProductName: "Chai",
}, {
ProductID: 22,
ProductName: "Chang",
}, {
ProductID: 33,
ProductName: "Aniseed Syrup",
}, {
ProductID: 44,
ProductName: "Chef Anton's Cajun Seasoning",
}, {
ProductID: 55,
ProductName: "Chef Anton's Gumbo Mix",
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: {
type: "string"
}
},
}
},
pageSize: 10
},
sortable: true,
filterable: true,
pageable: true,
columns: [
{ field: "ProductID", title: "ProductID" },
{ field: "ProductName", title: "ProductName" },
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
</script>
</body>
</html>
Пример: сетка Kendo-UI на странице HTML5 - существующий элемент таблицы HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
});
</script>
</div>
</body>
</html>
Чтобы добавить сетку kendo-UI в приложении ASP.NET MVC, выполните следующие шаги.
- Создание проекта ASP.NET MVC
- Включите Javascript и файлы CSS. Существует два варианта: локальная копия этих файлов или использование CDN-сервисов Kendo UI.
Использовать локальный JavaScript и CSS
Перейдите к месту установки интерфейса Telerik для ASP.NET MVC. По умолчанию он находится в папке C: \ Program Files (x86) \ Telerik.
Скопируйте каталог js из места установки и вставьте его в папку Scripts приложения.
Скопируйте каталог стилей из места установки и вставьте его в папку « Содержимое » приложения.
Переименуйте каталог Scripts / js в Scripts / kendo . Переименуйте содержимое / стили в Content / kendo .
Откройте App_Start / BundleConfig.cs, чтобы добавить ниже пакеты сценариев и стилей для пользовательского интерфейса Telerik для ASP.NET MVC.
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
// "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
"~/Scripts/kendo/kendo.aspnetmvc.min.js"));
bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/kendo.common.min.css",
"~/Content/kendo/kendo.default.min.css"));
bundles.IgnoreList.Clear(); //Tell the ASP.NET bundles to allow minified files in debug mode.
Переместите пакет jQuery в главный тег страницы. По умолчанию она находится в конце страницы. Отобразить пользовательский интерфейс Telerik для пакета сценариев ASP.NET MVC после jQuery.
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
Использовать службы CDN
Включите kendo.common.min.css и kendo.default.min.css . Добавьте тег ссылки в тег заголовка макета.
Включите kendo.all.min.js и kendo.aspnetmvc.min.js после jQuery.
Если используется оболочка планировщика Telerik MVC, введите kendo.timezones.min.js после kendo.all.min.js .
Вы можете найти путь cdn здесь для вышеупомянутых файлов.
Добавьте ссылку на Kendo.Mvc.dll в свой проект, и DLL доступна в обертках местоположения / aspnetmvc / Binaries / MVC *.
Следующий шаг - предоставить ASP.NET MVC информацию о пространстве имен Kendo.Mvc.UI, где находятся обертки на стороне сервера. Для этого добавьте
<add namespace="Kendo.Mvc.UI" />тег пространства имен в корневой web.config и просмотрите web.config.
- Чтобы проверить свою настройку, добавьте ниже виджет DatePicker Kendo UI на странице view / aspx.
бритва
@(Html.Kendo().DatePicker().Name("datepicker"))
ASPX
<%: Html.Kendo().DatePicker().Name("datepicker") %>