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. Image for the cookie policy date
close icon

show images into datagrid

Hi,

i have a grid which contains data from tree database tables. İ want add in one of the grid column a image. Actually i can fetch into image column the data from images Table from database which calls imagepath and  a data for example: xyz.jpg.
How can i use this path to show the image into my grid. 

İ found only one example about images into datagrid in demo:

https://ej2.syncfusion.com/vue/demos/#/material/grid/column-template.html

But this was not helpful enough. 



Attachment: productt_5ea354e0.zip

1 Reply

PS Pavithra Subramaniyam Syncfusion Team November 15, 2019 07:11 AM UTC

Hi Nurhan, 
 
Greetings from Syncfusion support. 
 
You can achieve your requirement by using the below way. Please refer to the below code example, documentation link and sample link for more information. 
 
[App.Vue] 
<template> 
  <div id="app"> 
    <ejs-grid id="Grid" :columns="columns" ref="grid" :dataSource="data" :allowPaging="true"></ejs-grid> 
  </div> 
</template> 
 
<script> 
import Vue from "vue"; 
import { GridPluginPage } from "@syncfusion/ej2-vue-grids"; 
import { data } from "./datasource"; 
 
Vue.use(GridPlugin); 
 
export default { 
  data() { 
    debugger; 
    return { 
      data: data, 
      columns: [ 
        { 
          field: "OrderID", 
          headerText: "Order ID", 
          width: 120, 
          textAlign: "Right" 
        }, 
        { 
          field: "CustomerID", 
          headerText: "Customer ID", 
          width: 150, 
          showInColumnChooser: false 
        }, 
        { 
          field: "EmployeeID", 
          template: 
            '<div class="image"> <img src="https://ej2.syncfusion.com/vue/demos/src/grid/images/${EmployeeID}.png" alt="${EmployeeID}" /></div>', 
          headerText: "Employee ID", 
          width: 130 
        } 
      ] 
    }; 
  }, 
  provide: { 
    grid: [Page] 
  }, 
  methods: {} 
}; 
</script> 
<style> 
.image img { 
  height: 55px; 
  width: 55px; 
  border-radius: 50px; 
  box-shadow: inset 0 0 1px #e0e0e0inset 0 0 14px rgba(0000.2); 
} 
</style> 
 
Documentation for template with column directives:  https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-template 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon