show images into datagrid

[Nurhan Aydogdu]

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

[Pavithra Subramaniyam]

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 { GridPlugin, Page } 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 #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2); 

} 

</style> 

 

Documentation for template with column directives:  https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-template 

 

Sample: https://codesandbox.io/s/vue-template-67s2z 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S.