AngularJS +Kendo UI Grid template
var dataSource = new kendo.data.DataSource({
transport: {
dataType: "json",
read: inputUri + $stateParams.subjectID,
},
pageSize: 10,
});
$scope.mainGridOptions = {
dataSource: dataSource,
//height: 420,
scrollable: false,
sortable: true,
filterable: true,
//pageable: {
// refresh: true,
// pageSizes: true,
// buttonCount: 5
//},
selectable: true,
columns: [
{
field: "Name",
title: "Input Name",
width: "300px"
},
{
field: "Value",
title: "Value",
template: '<input type="text" value="#= Value#" />'
},
{
field: "Page",
title: "Page",
template: '<input type="text" value="#= Page#" />'
}
],
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
noRecords: true
};
$scope.detailGridOptions = function (dataItem) {
return {
dataSource: {
transport: {
dataType: "json",
read: baseUri + $stateParams.documentID,
},
filter: { field: "InputID", operator: "eq", value: dataItem.ID }
},
scrollable: true,
sortable: true,
pageable: false,
columns: [
{ title: "ID", width: "50px", template: "<span class='row-number'></span>" },
{ field: "OptionValue", title: "Value", template: "#if(OptionValue == null) {#<textarea style='width:90%'></textarea>#} else{##:OptionValue##}#" },
{ field: "Page", title: "Page", width: "80px", template: "#if(Page == null) {#<input type='text' style='width:90%'/>#} else{##:Page##}#" },
{ template: '<input type="checkbox" #= IsAnswer ? \'checked="checked"\' : "" # class="chkbx" ng-click="checkboxClicked(dataItem)"/>', width: "80px" }
],
selectable: true,
dataBound: function () {
var rows = this.items();
$(rows).each(function () {
var index = $(this).index() + 1;
var rowLabel = $(this).find(".row-number");
$(rowLabel).html(index);
});
}
};
};
AngularJS +Kendo UI Grid template的更多相关文章
- Kendo UI Grid 使用总结
Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...
- Kendo UI Grid 批量编辑使用总结
项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...
- kendo ui grid选中行事件,获取combobox选择的值
背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...
- Asp.net mvc Kendo UI Grid的使用(二)
上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...
- [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)
有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...
- 封装扩展Kendo UI Grid
封装后的代码如下: function DataGrid(options) { this.options = { height: "100%", sortable: true, re ...
- kendo ui grid控件在选择行时如何取得所选行的某一列数据
$("#grid").kendoGrid({ dataSource: dataSrc, columns: [ { template: '#=material_id#', width ...
- kendo ui grid 汉化
加入js引用 <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" r ...
- Asp.net mvc Kendo UI Grid的使用(三)
上一篇的操作已经能够显示基本数据了,这次介绍一下如何进行数据操作以及显现自定义命令. 第一步当然还是准备数据: [HttpPost] public ActionResult PersonalList_ ...
随机推荐
- MySQL 误操作后数据恢复(update,delete忘加where条件)
在数据库日常维护中,开发人员是最让人头痛的,很多时候都会由于SQL语句写的有问题导致服务器出问题,导致资源耗尽.最危险的操作就是在做DML操作的时候忘加where条件,导致全表更新,这是作为运维或者D ...
- java框架之SpringMVC(1)-入门&整合MyBatis
前言 SpringMVC简介 SpringMVC 是一个类似于 Struts2 表现层的框架,属于 SpringFramework 的后续产品. 学习SpringMVC的原因 SpringMVC 与 ...
- 使用intellJ导入非maven,gradle等非构建工程的依赖,发布工程时候的打包详解
一.导入 1.java项目在没有导入该jar包之前,如图: 2.点击 File -> Project Structure(快捷键 Ctrl + Alt + Shift + s),点击Proje ...
- Python之模块导入
import sys #import module (.py)import functools #名词空间 functoolsprint(functools) print("-------- ...
- Oracle经典书籍
Oracle实用教程 深入浅出Oracle
- Android项目第一天,下载安装Android Studio和“我的第一个安卓项目”
一.AS的下载我是在AS官方网站进行下载的最新版本,如图所示 二.AS的安装过程 点击你下载的安装包安装即可,傻瓜式一站到底. 到这一步时选择第二个按钮, 随后出现如下界面 这个窗口是提示我们设置代理 ...
- go get Unknown SSL protocol error in connection to gopkg.in
OSX go get报错 go get Unknown SSL protocol error in connection to gopkg.in https://github.com/niemeyer ...
- C++ Com控件调用
1.假如我们创建的Com组件的工程名叫TestCom,在其中添加了一个接口叫MyCom,接口名会自动命名为IMyCom,在其中添加两个方法,分别为: HRESULT Add([in] long n1, ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- 第七节 DOM操作应用-高级
表格应用: 获取:tBodies.tHead.tFoot.rows.cells <!DOCTYPE html> <html lang="en"> <h ...