DevExtreme学习笔记(一) DataGrid中MVC分析
@(Html.DevExtreme().DataGrid()
.ID("gridContainer")
.DataSource(d => d
.OData()
.Url("https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes")
.BeforeSend(@<text>
function(request) {
request.params.startDate = "2018-05-10";
request.params.endDate = "2018-05-15";
}
</text>)
)
.RemoteOperations(false)
.AllowColumnReordering(true)
.RowAlternationEnabled(true)
.ShowBorders(true)
.OnContentReady("contentReady")
.Paging(p => p.PageSize(10))
.Pager(p => p
.ShowPageSizeSelector(true)
.AllowedPageSizes(new int[] {10, 25, 50, 100})
)
.SearchPanel(s => s
.Visible(true)
.HighlightCaseSensitive(true)
)
.GroupPanel(g => g.Visible(true))
.Grouping(g => g.AutoExpandAll(false))
.Columns(columns => {
columns.Add()
.DataField("Product")
.GroupIndex(0);
columns.Add()
.DataField("Amount")
.Caption("Sale Amount")
.DataType(GridColumnDataType.Number)
.Format(Format.Currency)
.Alignment(HorizontalAlignment.Right);
columns.Add()
.DataField("Discount")
.Caption("Discount %")
.DataType(GridColumnDataType.Number)
.Format(Format.Percent)
.Alignment(HorizontalAlignment.Right)
.AllowGrouping(false)
.CssClass("bullet")
.CellTemplate(@<text>
@(Html.DevExtreme().Bullet()
.Value(new JS("value * 100"))
.Size(s => s
.Height(35)
.Width(150)
)
.Margin(m => m
.Top(5)
.Bottom(0)
.Left(5)
)
.ShowTarget(false)
.ShowZeroLevel(true)
.StartScaleValue(0)
.EndScaleValue(100)
.Tooltip(t => t
.Enabled(true)
.Font(f => f.Size(18))
.PaddingTopBottom(2)
.CustomizeTooltip("customizeTooltip")
)
)
</text>);
columns.Add()
.DataField("SaleDate")
.DataType(GridColumnDataType.Date);
columns.Add()
.DataField("Region")
.DataType(GridColumnDataType.String);
columns.Add()
.DataField("Sector")
.DataType(GridColumnDataType.String);
columns.Add()
.DataField("Channel")
.DataType(GridColumnDataType.String);
columns.Add()
.DataField("Customer")
.DataType(GridColumnDataType.String)
.Width(150);
})
)
<script>
var collapsed = false;
function contentReady(e) {
if(!collapsed) {
collapsed = true;
e.component.expandRow(["EnviroCare"]);
}
}
function customizeTooltip(pointsInfo) {
return { text: parseInt(pointsInfo.originalValue) + "%" };
}
</script>
DevExtreme学习笔记(一) DataGrid中MVC分析的更多相关文章
- DevExtreme学习笔记(一) DataGrid中js分析
1.overviewjs采用 $(function() { $("#gridContainer").dxDataGrid({ dataSource: { store: { type ...
- DevExtreme学习笔记(一) DataGrid中数据提交注意事项
1.数据提交的{}数据需转化json格式 syncPost('/controller/action', { values: JSON.stringify({d:x}) }, function (res ...
- DevExtreme学习笔记(一) DataGrid中数据筛选
config.filterRow = { visible: true, applyFilter: "auto" }; config.headerFilter = { visible ...
- DevExtreme学习笔记(一) DataGrid中注意事项
1.阻止cell编辑 config.onEditorPreparing = function (e) { if (e.dataField === 'xx' && e.row.data. ...
- ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...
- memcached学习笔记——存储命令源码分析下篇
上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制 ...
- memcached学习笔记——存储命令源码分析上篇
原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command ...
- input子系统学习笔记六 按键驱动实例分析下【转】
转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...
- angular学习笔记(3)- MVC
angular1学习笔记(3)- MVC --- MVC终极目标 - 模块化和复用 AngularJs的MVC是借助于$scope实现的!!! 神奇的$scope: 1.$scope是一个POJO(P ...
随机推荐
- Linux进阶之Shell编程
1.什么是Shell Shell是一个命名行解释器,它为用户提供一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用Shell来启动.挂起.停止甚至是编写一些程序. 2.Shell脚本 ...
- CSS系列之后代选择器、子选择器和相邻兄弟选择器
后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...
- tengine负载均衡高可用配置
环境 Tengine-master:192.168.109.100 Tengine-slave:192.168.109.101 tomcat01:192.168.109.102 tomcat02:19 ...
- 【大数据】安装关系型数据库MySQL安装大数据处理框架Hadoop
作业来源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3161 1. 简述Hadoop平台的起源.发展历史与应用现状. 列举发展过 ...
- mysql union all limit的使用
To apply ORDER BY or LIMIT to an individual SELECT, place the clause inside the parentheses that enc ...
- spring 技术内幕读书笔记1
1 在 java 应用开发中,往往会涉及复杂的对象耦合关系,在 代码中处理这些耦合关系,对代码的维护性和应用扩展性会带来许多不便.通过使用spring 的 IOC 容器,可以对这些耦合关系实现一个文本 ...
- odoo开发笔记 -- 跨域Refused to display in a frame because it set 'X-Frame-Options' to 'DENY'
场景描述: odoo界面嵌入iframe,Refused to display in a frame because it set 'X-Frame-Options' to 'DENY' 跨域请求失败 ...
- Wise Force Deleter 强制删除文件工具
https://www.xitmi.com/3321.html Wise Force Deleter v1.49 中文绿色版 强制删除文件工具
- 简单的 js 模版引擎
简单的 js 模版引擎 var tplEngine = function(tpl, data) { var reg = /<%([^%>]+)?%>/g, regOut = /(^( ...
- [LeetCode] 257. Binary Tree Paths 二叉树路径
Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...