<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var uid="";
$("#grid").kendoGrid({
editable: "popup",
columns: [
{ field: "name" },
{ field: "age" }
,
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "Jane Doe", age: 30 },
{ id: 3, name: "Jane Doe", age: 30 },
{ id: 4, name: "Jane Doe", age: 30 },
{ id: 5, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" }
}
}
}
},
selectable: "row",
edit: function(e) {
if (!e.model.isNew()) {
console.log("1",e.model.uid);
uid=e.model.uid;
var grid = $("#grid").data("kendoGrid");
grid.select("tr[data-uid='" + uid + "']");
}
},
save: function(e) {
},
dataBound:function(e){
console.log("2",uid);
var grid = $("#grid").data("kendoGrid");
//var uid = grid.dataSource.at(1).uid;
grid.select("tr[data-uid='" + uid + "']");
},
select:function(e){
console.log("test",e);
}
});
相关推荐
在IT领域,Kendo UI Grid是一款非常流行的JavaScript数据可视化组件,用于构建强大的、响应式的网格视图。在处理数据展示时,我们常常需要对不同列的数据进行格式化,以满足特定的显示需求。本篇文章将深入探讨如何...
然后,使用`kendoGrid()`函数来初始化Grid: ```javascript $("#grid").kendoGrid({ dataSource: { /* 数据源配置 */ }, columns: [ /* 列定义 */ ] }); ``` 2. **数据源(DataSource)** Kendo UI Grid的...
应用kendoui grid实现的多级分组表格展现,里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进,增加了很多的个别需求实现,在原来的版本是做不到的。...
Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 ...
然后,通过JavaScript的`$("#grid").kendoGrid()`方法初始化Grid,并传入相应的配置选项,如列定义、数据源等。 在数据源方面,Kendo UI Grid支持多种类型的数据源,包括Ajax、JSON、XML等。在描述中提到的服务交互...
该代码类里面实现的主要操作: 1.ajax 访问后代接口,并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置,这个是本人亲自写的,并且经过验证是正确的
在开发Web应用时,Kendo UI的Kendo Grid是一个非常重要的组件,它提供了一种高效的方式来展示和编辑数据。Kendo Grid支持多种编辑模式,如弹出式编辑、内联编辑和分步编辑,同时也提供了强大的验证机制来确保输入的...
Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid
3. **添加编辑模板**:为Grid的编辑模式创建一个模板,其中包括Kendo UI编辑框和FileUpload组件。编辑模板应包含用于输入文本的TextBox和用于选择文件的FileUpload控件。 4. **配置FileUpload**:设置FileUpload的...
这两天项目需要,临时做了一个,没有封装,该grid可以实现列和行的自定义添加和删除,包括修改标题,以及列的右击添加事件。希望对你们有所帮助!双击列名可以对列名进行修改,右键列名可以选择左侧和右侧添加列以及...
Kendo UI Grid为开发者提供了100多种丰富的网格功能,从基本的筛选、排序,到高级的编页、分层数据分组等等。毫不夸张的说,Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实,下面我为大家整理了它的...
1. 数据网格(Grid):Kendo UI Grid 是一个高度可配置的数据展示和管理工具,支持数据分页、排序、过滤、编辑等功能,同时提供了强大的行选择、分组、汇总和远程数据绑定能力。 2. 日历(Calendar):提供基本的...
Kendo UI Grid是Telerik公司开发的一个用于构建交互式数据网格的JavaScript库,它在Web应用中被广泛使用,尤其在C#后端支持的情况下。Kendo Grid API提供了丰富的功能,包括数据绑定、分页、排序、过滤、编辑、分组...
5. **同步Grid状态**:在Multiselect的选择发生变化后,可能需要更新Grid的整体选择状态,例如,提供全选/全不选功能,或者在Grid的头部添加一个总览式的Multiselect,同步当前所有被选中的行。 6. **交互优化**:...
剑道网格卷轴 kendo-ui 库的程序网格... kendoGrid ( { dataSource : { data : data , pageSize : 20 } , ... //init var kendoGridScroll = new KendoGridScroll . Model ( $ ( "#grid" ) , function ( gri
"剑道UI"是Kendo UI的一个通俗别称,可能源于其在用户界面设计上的精准和锐利,就像日本剑道中的剑术一样。 Kendo UI的核心特性包括: 1. **组件丰富**:Kendo UI包含了数据网格(Grid)、日历(Calendar)、下拉...
var grid = $("#Grid").data("kendoGrid"); grid.bind("change", function (e) { // 处理选中行的逻辑 }); }); ``` 6. **服务器端操作与Ajax更新** 除了基本的数据绑定,Kendo UI Grid还支持分页、排序、...
3. 创建一个视图(如`Index.cshtml`),在其中使用Razor语法初始化Kendo UI Grid,并绑定到控制器提供的数据。 ```csharp // 在HomeController.cs public ActionResult Index() { var data = GetDataFromDatabase...
一个演示是可在Github上页网页的剑道并网编辑。 基本用法 // create grid var grid = $grid . kendoGrid ( { dataSource : dataSource , columns : [ { //column settings field : "type" , title : "Type" , ...