Kendo UI for jQuery最新试用版下载

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库。

某些Kendo UI窗口小部件提供了编辑功能,该功能通过使用Kendo UI MVVM绑定使用特定的编辑器元素或与模型绑定的表单来实现。

以下小部件支持编辑功能:

  • Kendo UI Grid
  • Kendo UI ListView
  • Kendo UI TreeList
  • Kendo UI Scheduler
  • Kendo UI Gantt
入门指南

支持编辑的Kendo UI小部件提供以下常用配置选项:

  • editable—控制是否启用编辑。 例如默认情况下,Kendo UI Grid小部件中的编辑功能是禁用的。
  • editable.template—允许您定义自定义编辑器模板。

注意:一些小部件提供了其他可编辑选项,有关更多详细信息,请参阅特定的窗口小部件API文档。 例如Grid小部件可以使用editable.destroy选项禁用删除功能。

支持编辑的Kendo UI小部件提供以下常见事件:

  • edit—在显示编辑器表单之前触发,UI元素已绑定到模型。
  • save—在保存模型之前触发,编辑表单仍处于打开状态。
  • remove—在删除模型之前触发。

注意

  • 只有Scheduler和Gantt支持防止edit、save和remove事件。
  • 这些小部件仅使用一种编辑器形式,它为create和update操作应用相同的编辑器模板。

要启用小部件的编辑功能:

  1. 配置数据源的CRUD(创建,读取,更新,销毁)数据操作。
  2. 使用schema.model选项定义模型字段。
  3. 启用editable选项。

这些方法主要适用于支持编辑的其他Kendo UI小部件。

使用编辑器表单

您可以构建编辑器表单并将特定模型绑定到编辑器表单。

构建编辑器表单

Kendo UI窗口小部件基于schema.model结构(更具体地说是字段集合)动态构建编辑器表单。

注意

  • 在schema.model.id中定义数据项的id字段,这样可以确保正确添加、编辑和删除项目。
  • 定义字段的数据类型来利用内置编辑器,可过滤的UI以及正确的排序、过滤和分组功能。

下表列出了可用的数据类型。

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

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 }
}
}
}
}

注意:Kendo UI Scheduler具有静态模型结构,并且仅遵循预定义的模型字段列表。 要编辑其他字段,请使用自定义编辑器模板。

自动生成的编辑器表单通过Kendo UI MVVM模式绑定到模型,该小部件还允许您使用自定义编辑器模板覆盖此表单。

创建表单后,小部件将执行以下操作:

  1. 将编辑器字段绑定到模型。
  2. 触发edit事件。
  3. 显示编辑器表单。
  4. 根据在编辑器中所做的更改来更新模型。
  5. 当编辑器表单即将关闭时,小部件将触发save事件。 在此阶段,更改可以被接受或拒绝。

注意:编辑器表单是在触发编辑事件之前创建并绑定的,并且已经被填充。

将特定模型绑定到编辑器表单

触发edit事件后,小部件将获取相应的模型,并通过Kendo UI MVVM模式将生成的或自定义编辑器表单绑定到该模型。 通过使用值绑定来完成模型字段和表单编辑器之间的连接。

此连接遵守以下规则:

  • 初始加载时,将使用模型值填充编辑器表单。
  • 当相关编辑器触发change事件时,将更新模型,值绑定获取其值并填充模型字段。
  • 使用ObservableObject API时,表单编辑器会更新。 如果要更新相应的UI编辑器,请使用set方法。 如果省略此API,则编辑器不会更改。

Kendo UI R3 2019全新发布,最新动态请持续关注Telerik中文网!

扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹的更多相关文章

  1. Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  2. Kendo UI for jQuery自定义小部件第一弹!不得不看的入门指南

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  3. Web UI开发推荐!Kendo UI for jQuery自定义小部件——使用MVVM

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  4. Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  5. 知名界面类控件Kendo UI for jQuery R2 2019 SP1发布|附下载

    Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切.从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%. [适用 ...

  6. Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  7. Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  8. 数据管理必看!Kendo UI for jQuery过滤器的全球化

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  9. 数据管理必看!Kendo UI for jQuery过滤器状态保持

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

随机推荐

  1. Design Phone Directory

    Design a Phone Directory which supports the following operations: get: Provide a number which is not ...

  2. [转帖]瀚高数据库创建uuid的方法

    使用syssso登录,并执行下列语句 highgo=> select set_secure_level('off'); set_secure_level -------------------- ...

  3. 【Python】【基础知识】【内置常量】

    Python的内置常量有: False.True.None.NotImplemented.Ellipsis.__debug__ 由 site 模块添加的常量:quit.exit.copyright.c ...

  4. scrapy生成json中文为ASCII码解决

    修改pipelines.py 即可 修改内容如下: import json import codecs import os class BaiduNewsPipeline(object): #增加的 ...

  5. mysql数据库设计字符类型及长度

    1.数字类型 小数的我就不聊了,因为有小数点的一般都是用字符串保存.关于整数,有几种可以选TINYINT.SMALLINT.MEDIUMINT.INT和BIGINT,分别占1.2.4.8字节.如果无符 ...

  6. 易混乱javascript知识点简要记录

    一.== vs === ==在做判断时,如果对比双方的类型不一样的话,就会进行类型转换 假如我们需要对比 x 和 y 是否相同,就会进行如下判断流程: 首先会判断两者类型是否相同.相同的话就是比大小了 ...

  7. Coloring Edges(有向图环染色)-- Educational Codeforces Round 72 (Rated for Div. 2)

    题意:https://codeforc.es/contest/1217/problem/D 给你一个有向图,要求一个循环里不能有相同颜色的边,问你最小要几种颜色染色,怎么染色? 思路: 如果没有环,那 ...

  8. (0)c++入门——认识指针与数组——指针即是内存中地址。

    初识指针 首先需要了解一个概念,计算机的内存(或者说是寄存器)都是有地址的. <c++ primer plus>一书P37中提到这样一个概念:为把信息存储在计算机中,程序必须记录3个基本属 ...

  9. pycharm 安装好,只要三部! 超级简单教程!

    pycharm的安装,确实比较麻烦,所以特意做了一期简单版本的安装教程,跟着教程走...只要三部! →下载 链接:https://pan.baidu.com/s/1JxZgAhPVKAIoM1_jpD ...

  10. 【python tkinter】对于窗口存在的认识

    今天写了messagebox(信息提示框) 和 inputbox(输入框). 对于  [窗口] 有了新的认识... 发现一个奇怪的事情(虽然原因很简单啦······) def msg_box(titl ...