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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Data grid column join

Thread ID:





149022 Nov 12,2019 08:30 AM UTC Nov 22,2019 11:14 AM UTC Vue 3
Tags: Data Grid
Eda Toprak
Asked On November 12, 2019 08:30 AM UTC

Hello Syncfusion,
I have one data grid table. I want to use separate columns in a single column. For example, in this way;

Attachment: New_folder_999c5320.zip

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 12, 2019 02:04 PM UTC

Hi Eda,

You can achieve this requirement using the Column Template feature of the Grid. Refer to the Help Document.


Using this way, you can customize the cell as our wish and combine all the columns in the single cell.

Seeni Sakthi Kumar S 

Eda Toprak
Replied On November 21, 2019 02:32 PM UTC

Hi Seeni, 

thank you for reply. İ have an auto generated grid in my project, so i haven't a column to define ctemplate. 
My template looks like this: 


How can i do this?
Please look at the attached file (currencies.vue) and the screenshot from the comment before. (newfolder /example2.png)

Attachment: New_folder_999c5320_(1)_a139202b.zip

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 22, 2019 11:14 AM UTC

Hi Eda, 

Thanks for your  update. 

We have checked the provided code snippets and you have defined column values by using columns property. You can achieve your requirement by using below way. Here, we have render all column values in CustomerID column using template property. Find the below code snippets and sample for your reference. 

[code snippets] 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid" :dataSource="data" :columns="columns" :allowPaging="true"> 
export default { 
  data() { 
    return { 
      data: data, 
     columns: [ 
        { field: "OrderID", headerText: "Order ID", width: 150, isPrimaryKey: true }, 
        { field: "CustomerID", headerText: "Customer ID", template: '<span>${OrderID},${CustomerID}, ${ShipCity}, ${Freight}</span>', width: 150 }, 
        { field: "ShipCity", width: 150 }, 
        { field: "Freight", format: "C2", width: 150 } 

Please get back to us if you need further assistance. 

Seeni Sakthi Kumar S 


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