Grid / Custom command view detail informations
来源:互联网 发布:心动网络校招笔试 编辑:程序博客网 时间:2024/05/16 15:27
http://demos.telerik.com/kendo-ui/grid/custom-command
http://dojo.telerik.com/
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/custom-command">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<div id="details"></div>
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
<style type="text/css">
#details-container
{
padding: 10px;
}
#details-container h2
{
margin: 0;
}
#details-container em
{
color: #8c8c8c;
}
#details-container dt
{
margin:0;
display: inline;
}
</style>
</div>
</body>
</html>
- Grid / Custom command view detail informations
- make command detail
- custom view
- Custom View
- sourceinsight custom command.
- Custom Command WPF
- ApacheFtpServer - Custom command extension
- Grid View
- Grid View
- Grid View
- Dev GridView-Bind Detail Grid during runtime
- Dynamic grid row command
- Creating a Custom View
- ActionBar - Custom view
- 2501-View-custom
- Custom Container View Controller
- Android custom view
- Custom Container View Controller
- 五大常用算法之一:分治算法
- 洛谷 P1019 单词接龙
- java和C结构体通信
- java web的MVC开发模式
- BroadcastReceiver应用详解
- Grid / Custom command view detail informations
- GitLab 结合 sourceTree 图形化管理使用
- UISnapBehavior-动画效果:迅猛移动弹跳摆动
- PHP 获取二维数组中某个key的集合
- JAVA学习(六)
- Ubuntu 打开命令行终端窗口的几种方式
- 算法与数据结构-常用排序算法总结2-桶排序
- 轻量级的 jquery 自定义弹窗插件 用法简单
- Cain使用教程