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

Data grid column join

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

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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 

ET Eda Toprak 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

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon