Data grid column join

[Eda Toprak]

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]

Hi Eda,

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

https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-template 

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

Regards,  

Seeni Sakthi Kumar S 

[Eda Toprak]

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: 

<template> 

<v-app> 

<ejs-grid 

:height="1000" 

ref="grid" 

:dataSource="currencies" 

:allowPaging="true" 

:allowFiltering="true" 

:allowTextWrap='true' 

:queryCellInfo="onQueryCellInfo" 

:toolbar="toolbar" 

:editSettings="editSettings" 

:dataBound="dataBound" 

:actionBegin="actionBegin" 

:actionComplete="actionComplete" 

:columns="columns" 

width="auto" 

></ejs-grid> 

</v-app> 

</template> 

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]

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] 

 

<template> 

    <div id="app"> 

        <ejs-grid id="Grid" ref="grid" :dataSource="data" :columns="columns" :allowPaging="true"> 

 

        </ejs-grid> 

    </div> 

</template> 

 

<script> 

... 

 

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 } 

      ] 

    }; 

  }, 

  ... 

}; 

</script> 

 

 

Sample: https://codesandbox.io/s/vuedataload-spinner-final-p35xp 

Please get back to us if you need further assistance. 

Regards, 

Seeni Sakthi Kumar S