Hi Wei,
Thanks for contacting Syncfusion support.
Based on your shared information we suspect that you want to display a column which data type is array or a complicate object but it’s not achievable using in-built support. Because by default, the EJ2 Grid column only supports number, string, date, dateTime, Boolean, checkbox type values, and which is not supports array type value. Refer to the below documentation.
But we are able to show array values in the Grid column using the valueAccessor and column template features because in template column have any form of HTML element. If you are using columTemplate feature, we can iterating the array value from dataSource, then bind the value into the columnTemplate .
Using columnTemplate feature we have displayed array values in Grid cell. Likewise you can customize as per your needs. Please refer to the below code and sample link.
|
[column-template.vue]
<template>
<div>
<div class="image">
<div class="customer" v-for="customer in cData" v-bind:key="customer">
<span>{{ customer }}</span>
</div>
</div>
</div>
</template>
<script>
. . . . . .
computed: {
cData: function () {
var value = this.data[this.data.column.field];
return value;
},
},
};
</script>
[App.vue]
<template>
<div id="app">
<ejs-grid :dataSource="data" :gridLines="lines" height="350">
<e-columns>
<e-column
field="HyperLink"
headerText="Employee Image"
width="150"
textAlign="Center"
:template="cTemplate"
></e-column>
. . . . . . . .
</e-columns>
</ejs-grid>
</div>
</template>
<script>
. . . . . .
import columntempVue from "./column-temp.vue";
export default {
data: () => {
return {
lines: "Both",
data: [
{
HyperLink: ["grid", "drop-down-list", "datetimepicker"],
OrderID: 10248,
CustomerID: "VINET",
OrderDate: new Date("06/02/2021 1:29:30"),
ShipName: "Vins et alcools Chevalier",
},
. . . . . . .
],
cTemplate: function () {
return { template: columntempVue };
},
};
},
};
|
But, this is used only for the display purpose we cannot perform Grid actions like Filtering, Searching, Grouping, Sorting, etc., to this column(when you are display the custom text through valueAccessor ). Because, the Grid can perform the actions (like sorting, grouping ,filtering) based on its dataSource value. This is the behavior of EJ2 Grid.
Note : The Grid actions like Filtering, Sorting, Searching, Grouping, aggregates, etc., are based on the column field and its dataSource value. We can display our own customized value in the column using its template or valueAccessor feature . But, the Grid actions are based on the dataSource value not with the customized value. This is the behavior of EJ2 Grid.
Please get back to us if you need further assistance with this.
Regards,
Thiyagu S
