124 строки
5.2 KiB
HTML
124 строки
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Essential JS 1 :Custom Command</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta charset="utf-8" />
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js"></script>
|
|
<![endif]-->
|
|
<!--[if gte IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js"></script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/jsrender.min.js"></script>
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/templatelocaldata.js"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<style>
|
|
td
|
|
{
|
|
padding: 2px 2px 3px 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="Grid"></div>
|
|
<div id="commanddialog"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$("#Grid").ejGrid({
|
|
// the datasource "window.employeeData" is referred from templatelocaldata.js
|
|
dataSource: window.employeeData,
|
|
enableRowHover: false,
|
|
allowSelection: false,
|
|
columns: [
|
|
{ field: "EmployeeID", headerText: "Employee ID", isPrimaryKey: true,editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 100 },
|
|
{ field: "FirstName", headerText: "First Name", width: 100 },
|
|
{ field: "LastName", headerText: "Last Name", width: 100 },
|
|
{ field: "HireDate", headerText: "Hire Date", width: 100, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
|
|
{ field: "Country", headerText: "Country", width: 100 },
|
|
{
|
|
headerText: "Employee Details",
|
|
commands: [
|
|
{
|
|
type: "details",
|
|
buttonOptions: {
|
|
text: "Details",
|
|
width: "100",
|
|
click: "onClick"
|
|
}
|
|
}
|
|
],
|
|
isUnbound: true,
|
|
textAlign: ej.TextAlign.Left,
|
|
width: 150
|
|
}
|
|
]
|
|
});
|
|
$("#commanddialog").ejDialog({
|
|
"width": 450,
|
|
title: "Details of employee",
|
|
showOnInit: false,
|
|
enableResize: false,
|
|
target: "#Grid"
|
|
});
|
|
});
|
|
</script>
|
|
<script id="templateData" type="text/x-jsrender">
|
|
<table>
|
|
<tr>
|
|
<td style="text-align: center">
|
|
<img class="emp-img" src="../content/images/grid/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" />
|
|
</td>
|
|
<td>
|
|
<table class="CardTable" cellpadding="3" cellspacing="2">
|
|
<tr>
|
|
<td>Name</td>
|
|
<td>: {{:TitleOfCourtesy}} {{:FirstName}} {{:LastName}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Birth Date</td>
|
|
<td>: {{:BirthDate}} </td>
|
|
</tr>
|
|
<tr>
|
|
<td>Title</td>
|
|
<td>: {{:Title}} </td>
|
|
</tr>
|
|
<tr>
|
|
<td>City</td>
|
|
<td>: {{:City}} </td>
|
|
</tr>
|
|
<tr>
|
|
<td>Code</td>
|
|
<td>: {{:PostalCode}} </td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</script>
|
|
<script type="text/javascript">
|
|
function onClick(args) {
|
|
var grid = $("#Grid").ejGrid("instance");
|
|
var index = this.element.closest("tr").index();
|
|
var record = grid.getCurrentViewData()[index];
|
|
$("#commanddialog").html($("#templateData").render(record))
|
|
.ejDialog("option", { position: { X: this.element.offset().left - 766, Y: this.element.offset().top - 187 } })
|
|
.ejDialog("open");
|
|
if (navigator.userAgent.indexOf("MSIE 8.0") != -1)
|
|
$("#commanddialog").find("img").width(150);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|