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
常见情况
定义自定义编辑器模板
当默认编辑器表单无法满足您的业务需求时，请使用editable.template选项创建自定义编辑器表单，该选项可用于定义自定义编辑器表单。
注意：每个小部件仅使用一个编辑器表单进行创建和更新操作。
以下规则适用于编辑器模板：
- 该模板使用Kendo UI模板语法。
- 通过MVVM值绑定，将编辑器绑定到特定的模型字段。
定义默认模型值
默认情况下模型字段具有基于字段类型的预定义值，您也可以将字段定义为nullable。要定义特定的默认值，请使用
schema.model.fields.defaulValue选项。value绑定使用模型来设置编辑器值，编辑器的值将因模型值而丢失。
schema: {model: {id: "ProductID",fields: {ProductID: { editable: false, nullable: true },ProductName: { defaultValue: "Product Name 1" }}}}
引用特定的编辑器控件
您可以使用小部件的edit事件从编辑器表单访问特定的编辑器元素。
通过特定的编辑器更新模型
要通过更新相关的编辑器来修改model，请手动触发change事件。这样您可以将更改通知的value绑定，并相应地更新模型。
注意：Kendo UI小部件提供了trigger方法，必须使用该方法来触发change事件。
不使用MVVM绑定添加编辑器
注意：
- 要实现自定义编辑，请使用自定义编辑器模板。
- Kendo UI MVVM绑定不能再使用，而模型绑定应手动处理。
为避免定义用于编辑特定模型字段的自定义编辑器模板，请在创建表单后添加其他编辑器：
- 连接小部件edit事件。
- 在edit事件处理程序中手动添加编辑器。
- 通过使用模型设置编辑器的值，该模型在edit事件处理程序的参数中可用。
- 连接编辑器的change事件并相应地更新model。
编辑之前访问模型
连接小部件的edit事件，您将从传递的参数中获取模型。
function edit(e) {
var model = e.model;
}
注意：调度程序将传递e.event字段而不是一个model， 该事件是SchedulerEvent类的实例。
通过UID访问模型
每个模型都有唯一的标识符，它应用于包含编辑器表单的HTML元素，您可以通过data-uid HTML属性识别该元素。使用该uid值，通过使用getByUid方法从小部件的数据源获取模型。
识别新模型
要区分创建操作和更新操作，请使用Model.isNew（）方法。
故障排除
本节提供了在配置编辑功能时可能遇到的常见问题的解决方案。
编辑事件中的模型字段值不会更新
描述：常见的情况是在小部件的编辑事件中修改模型，如果model字段的初始（默认）值无效，将阻止该模型。 在这种情况下，附加的UI验证会阻止任何其他模型修改，直到从编辑器表单更新值为止。
原因：在模型更新期间发生的以下操作会导致此问题：
- 使用set方法更新模型字段。
- 该模型将获取新值，并将其与当前值进行比较，如果它们不同，则可以设置新值。
- UI验证已触发。 注意，它使用编辑器元素值执行验证检查。 但是，它是无效的，因此我们尝试设置的新值将被忽略。
解决方案：通过使用schema.model.fields.defaultValue选项定义一个有效的defaulValue。
Kendo UI R3 2019全新发布，最新动态请持续关注Telerik中文网！
扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
