We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Thanks for contacting Syncfusion support.
We have created a sample based on your requirement and refer to the following JS playground sample,
http://jsplayground.syncfusion.com/dnw4x13f
In the above sample, we have used command column and angular template to view the Employee details.
Please refer the below Help document for command column,
http://help.syncfusion.com/js/api/ejgrid#members:columns-commands
Please refer to the following code example,
|
<script type="text/ng-template" id="templateData"><!--Angular Template--> <table> <tr> <td style="text-align: center"> <img class="emp-img" src="themes/images/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> </head> <body ng-controller="PhoneListCtrl"> <div class="content-container-fluid"> <div class="row"> <div class="cols-sample-area"> <div id="targetsGrid" ej-grid e-datasource="data" e-columns="columns"</div> <div id="commanddialog"></div> </div>
</div>
</div> <br /> <script>
angular.module('listCtrl', ['ejangular']) .controller("PhoneListCtrl", function ($scope) { $scope.columns = [ { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 }, { field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 }, { field: "City", headerText: 'City', textAlign: ej.TextAlign.Left, width: 100, customAttributes: { "id": "{{:EmployeeID}}" } }, // jsrender syntax usage in custom Attribute { field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left, width: 120 }, { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 }, {headerText: "Employee Details", commands: [ { type: "details", buttonOptions: { text: "Details", width: "100", click: "onClick" } } ], isUnbound: true, textAlign: ej.TextAlign.Center, width: 150 } ], $scope.data = window.employeeView; }); $("#commanddialog").ejDialog({ "width": 450, title: "Details of employee", showOnInit: false, enableResize: false, content: "#targetsGrid" }); function onClick(args) { var grid = $("#targetsGrid").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 - 455, Y: this.element.offset().top } }) .ejDialog("open"); } |
