kendo实现grid的inline编辑

$(document).ready(function () {

dataSource = new kendo.data.DataSource({

transport: {

read: function(options){//grid初始化时加载数据，由此方法提供

。。。

options.success(result);

update: function(options){。。。。} // 记录编辑完后所做的处理

batch: true,

pageSize: 20,

schema: {

model: {

id: "ProductID",

fields: {

ProductID: { editable: false, nullable: true },

ProductName: { validation: { required: true } },

UnitPrice: { type: "number", validation: { required: true, min: 1} },

Discontinued: { type: "boolean" },

UnitsInStock: { type: "number", validation: { min: 0, required: true } }

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

pageable: true,

height: 430,

columns: [

"ProductName",

{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },

{ field: "UnitsInStock", title:"Units In Stock", width: "100px" },

{ field: "Discontinued", width: "100px" },

{ command: ["edit", "destroy"], title: " ", width: "172px"

}],

editable: "inline"， // 记录被编辑时会以inline的方式

edit:function(e){} // 点击编辑按钮时执行的方法

});

转载于:https://blog.51cto.com/shenjinchen/1285510

kendo实现grid的inline编辑相关推荐

Kendo UI Grid 用法详细整理
目录一. kendo UI grid结构结构实例二. kendo UI grid常用属性 1.new kendo.data.DataSource()中常见属性: 2.$("#grid& ...
在ASP.NET MVC 4中使用Kendo UI Grid
Kendo UI 是Telerik推出的一套based on jQuery 的 Framework,提供了很多控件(Menu .Grid .Combox等...), 底层以Html5 + jQuery ...
kendo ui grid选中行事件，获取combobox选择的值
背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...
Kendo UI Grid 样式改变控制
目录一. 单元格颜色控制 1. 改变单元格背景颜色 2. 改变单元格边框 3. 改变行背景色二. 单元格内容控制 1. 单元格换行控制 a. css控制不换行 b. JS控制指定换行 2. 表格以 ...
kendoui固定宽度_Web开发：看如何定义Kendo UI Grid Width
Width 默认情况下,Grid没有设置宽度,其操作类似于块级元素,并扩展为100%的宽度(父元素的宽度). 入门指南要控制Grid的宽度,请将CSS width属性设置为Grid本身或其某些父类, ...
kendo ui 动态隐藏列_Kendo UI使用教程：Kendo UI Grid中的动态数据（一）
本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids.当您在一遍又一遍输入相同代码时,可以知道有些是可以关闭的,您输入的代码正在获取WET.创建具有动态数据的可编辑Kendo UI ...
ExtJS6 Grid的日期编辑栏位处理
文章目录问题描述问题分析解决方法问题描述定义一个带编辑列的Grid,定义的方式是Columns的某个Column使用'widgetcolumn'定义 { text : 'Planned Va ...
[Ext JS 4] 实战之Grid, Tree Gird编辑Cell
前言本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onRead ...
ext js ajax表单校验,Extjs之grid单元格编辑校验(示例代码)
效果如图所示: 1. 添加CSS样式 .x-grid-cell-invalid .x-grid-cell-inner:before{content: "";position: ab ...

kendo实现grid的inline编辑

kendo实现grid的inline编辑相关推荐

最新文章

热门文章