Data grid column join

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

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:

<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

Reply | Reply with quote

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]

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

</ejs-grid>

</div>

</template>

...

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149022	Nov 12,2019 08:30 AM UTC	Nov 22,2019 11:14 AM UTC	Vue	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US