Hi Ishan,
Thanks for contacting Syncfusion Support.
Query#:- How to display the product detail with photo on Kendo Gridview
We suspect that you need to display Image on Grid columns as like Kendo Grid. To achieve this requirement we can have ColumnTemplate feature of the Grid. Using Template property we can render Image or any custom such as DropdownList/Button etc.. controls inside Grid columns.
Refer to the code below:-
|
Index.html
<body ng-app="starter">
<ion-pane>
<ion-content ng-controller="ExampleController">
<div class="angularbind ioncenter">
<div ej-grid id="Grid" e-width="500px" e-datasource="data" class="ang-grid" e-allowpaging="true">
<div e-columns>
. . .
<div e-column e-field="CustomerID" e-headertext="Description" e-textalign="right"></div>
<div e-column e-field="Freight" e-headertext="Price" e-textalign="right"></div>
<div e-column e-headertext="Prodcut_Image" e-template="#templateDetails" e-textalign="right"></div>
</div>
</div>
</div>
</ion-content>
<ion-list> </ion-list>
</ion-pane>
<script type="text/x-jsrender" id="templateDetails">
<img style="width: 75px; height: 70px" src="ej/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" /> //display Image
</script>
</body>
App.js
example.controller("ExampleController", function($scope, $compile, $document) {
$scope.data = [
{ OrderID: '10248', CustomerID: 'VINET', EmployeeID:'1', Employee:{Address:'India'},Freight:'33.38' },
. . .
];
}); |
Refer to the demo and Documentation Link:-
If your requirement is different from above please get back to us with further details.
Regards,
Farveen sulthana T