<script type="text/template" id="colTip">
{{:value }}
</script>
<script type="text/x-jsrender" id="columnTemplate">
<a rel='nofollow' href="//www.syncfusion.com/">{{:FirstName}}</a>
</script>
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.employeeView" is referred from jsondata.min.js
columns: [
{ field: "FirstName", tooltip: "#colTip", template: "#columnTemplate", headerText: "First Name", width: 90 },
{ field: "LastName", headerText: "Last Name", width: 90 },
]
});
});
</script>
</body>
</html>
|
<script type="text/x-jsrender" id="lastProfileImageTemplate"> {{if LastProfileImage}} <img style='height: 15px' src='Images/Quick/{{:LastProfileImage}}' /> {{/if}} </script>
<script type="text/template" id="colTip"> {{:value }} </script>
<script type="text/x-jsrender" id="columnTemplate">
<img style="width: 75px; height: 70px" src="14.3.0.52/themes/web/content/images/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" />
</script>
<script type="text/template" id="columnTip">
{{:FirstName }} here please use the corresponding field name as {{:Descr }}
</script>
<div id="Grid"></div>
...
$("#Grid").ejGrid({
// the datasource "window.employeeView" is referred from jsondata.min.js
dataSource: ej.DataManager(window.employeeView).executeLocal(ej.Query().take(8)),
allowPaging: true,
pageSettings: { pageSize: 4 },
columns: [
{ field: "FirstName", headerText: "First Name", template: "#columnTemplate", tooltip: "#columnTip", isPrimarykey: true, editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 90 },
,
,
...
],
});
});
</script>
</body>
</html> |