Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

入门指南

• 配置Grid的数据源
• 通过schema配置定义字段
• 设置editable选项

配置数据源

下面的示例演示如何为CRUD（创建、读取、更新、销毁）数据操作配置数据源。

var dataSource = new kendo.data.DataSource({transport: {read:   "/Products",update: {url: "/Products/Update",type: "POST"},destroy: {url: "/Products/Destroy",type: "POST"},create: {url: "/Products/Create",type: "POST"}},// Determines if changes will be send to the server individually or as batch.batch: true//...});

通过schema定义字段

下面的示例演示如何通过DataSource schema.model声明字段定义。

注意：

下图列出了可用的数据类型：

var dataSource = new kendo.data.DataSource({schema: {model: {id: "id",fields: {id: {editable: false,// a defaultValue will not be assigned (default value is false)nullable: true},name: {type: "string",validation: { required: true }},price: {// A NumericTextBox editor will be initialized in edit mode.type: "number",// When a new model is created, this default will be used.defaultValue: 42},discontinued:{// A checkbox editor will be initialized in edit mode.type: "boolean"},created: {// A date picker editor will be initialized in edit mode.type: "date"},supplier: {type: "object" ,defaultValue: { companyName: "Progress", companyId: 1 }}}}}});

// Incell editing.  $("#grid").kendoGrid({// To enable the insertion of new records, save or cancel changes.toolbar: [ "create", "save", "cancel" ],columns: [ "name",// To trigger the in-cell destroy operation.{ command: [ "destroy" ] }],dataSource: dataSource,editable: true});

// Inline OR Popup editing.  $("#grid").kendoGrid({// To enable the insertion of new records.toolbar: [ "create" ],columns: [ "name",// To trigger the inline or popup edit and destroy operations.{ command: [ "edit", "destroy" ] }],dataSource: dataSource,editable: "inline" // OR editable: { mode : "popup" }});