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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

show images into datagrid

Thread ID:

Created:

Updated:

Platform:

Replies:

149107 Nov 14,2019 02:58 PM UTC Nov 15,2019 07:11 AM UTC Vue 1
loading
Tags: Data Grid
Nurhan Aydogdu
Asked On November 14, 2019 02:58 PM UTC

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 [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon