How to display the product detail with photo on the kendo grid view

Hello!
I want to display the product details like product_name, description, price,product_img, size,availability_status, etc on the kendo grid view. so please provide me the best solution for it to do it.

1 Reply 1 reply marked as answer

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 6, 2020 02:19 PM UTC

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 


Marked as answer
Loader.
Up arrow icon