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的更多相关文章

  1. Kendo UI Grid 使用总结

    Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...

  2. Kendo UI Grid 批量编辑使用总结

    项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...

  3. kendo ui grid选中行事件,获取combobox选择的值

    背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...

  4. Asp.net mvc Kendo UI Grid的使用(二)

    上一篇文章对Kendo UI做了一些简单的介绍以及基本环境,这篇文章来介绍一下Grid的使用 先上效果图: 要实现这个效果在Controller在要先导入Kendo.Mvc.UI,Kendo.Mvc. ...

  5. [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)

    有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...

  6. 封装扩展Kendo UI Grid

    封装后的代码如下: function DataGrid(options) { this.options = { height: "100%", sortable: true, re ...

  7. kendo ui grid控件在选择行时如何取得所选行的某一列数据

    $("#grid").kendoGrid({ dataSource: dataSrc, columns: [ { template: '#=material_id#', width ...

  8. kendo ui grid 汉化

    加入js引用 <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" r ...

  9. Asp.net mvc Kendo UI Grid的使用(三)

    上一篇的操作已经能够显示基本数据了,这次介绍一下如何进行数据操作以及显现自定义命令. 第一步当然还是准备数据: [HttpPost] public ActionResult PersonalList_ ...

随机推荐

  1. MySQL 误操作后数据恢复(update,delete忘加where条件)

    在数据库日常维护中,开发人员是最让人头痛的,很多时候都会由于SQL语句写的有问题导致服务器出问题,导致资源耗尽.最危险的操作就是在做DML操作的时候忘加where条件,导致全表更新,这是作为运维或者D ...

  2. java框架之SpringMVC(1)-入门&整合MyBatis

    前言 SpringMVC简介 SpringMVC 是一个类似于 Struts2 表现层的框架,属于 SpringFramework 的后续产品. 学习SpringMVC的原因 SpringMVC 与 ...

  3. 使用intellJ导入非maven,gradle等非构建工程的依赖,发布工程时候的打包详解

    一.导入 1.java项目在没有导入该jar包之前,如图: 2.点击 File ->  Project Structure(快捷键 Ctrl + Alt + Shift + s),点击Proje ...

  4. Python之模块导入

    import sys #import module (.py)import functools #名词空间 functoolsprint(functools) print("-------- ...

  5. Oracle经典书籍

    Oracle实用教程 深入浅出Oracle

  6. Android项目第一天,下载安装Android Studio和“我的第一个安卓项目”

    一.AS的下载我是在AS官方网站进行下载的最新版本,如图所示 二.AS的安装过程 点击你下载的安装包安装即可,傻瓜式一站到底. 到这一步时选择第二个按钮, 随后出现如下界面 这个窗口是提示我们设置代理 ...

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

  8. C++ Com控件调用

    1.假如我们创建的Com组件的工程名叫TestCom,在其中添加了一个接口叫MyCom,接口名会自动命名为IMyCom,在其中添加两个方法,分别为: HRESULT Add([in] long n1, ...

  9. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  10. 第七节 DOM操作应用-高级

    表格应用: 获取:tBodies.tHead.tFoot.rows.cells <!DOCTYPE html> <html lang="en"> <h ...