Posted 24 July 2018, 1:53 am EST
Hello,
I am using flexgrid to create a table with column groups. I am using the columGroupProvider class given in the sample code, and it is working great. I am able to define the hierarchical structure of my data, specify column properties, ect.
(this is Angular 6)
header: 'Dept 1',
columns: [
{
header: '2014',
columns: [
{
header: 'Sales',
binding: 'Dept_1_sales'
},
{
header: 'Expenses',
binding: 'Dept_1_EXP'
},
{
header: 'Target',
binding: 'Dep_1_TARGET'
},
{
header: 'Payroll',
binding: 'DEPT_1_PAYR'
}
]
},
Later in my code I use my column group provider and a reference to the flex grid to draw the columns. So far so good.
new ColumnGroupProvider(this.grid, this.columnDef);
The problem I am having is that I also need to customize the content of the cells with a template.
I have found some examples on the discussion board that use dynamic columns, but the code is very confusing and difficult to read. I would really like to be able to define a ng-template in my view and assign by reference to a particular template column like another property.
Angular 6 allows you to set a reference to a template and then access it as type TemplateRef<> on the component. I have use this before to pass templates around to different components. Is it possible to assign a template to a property of the column pro grammatically, rather than having to iterate through a collection of columns in a view?
So for example, the view could be
<ng-template wjFlexGridCellTemplate #column1 [cellType]="'Cell'" let-item="item">
abc
</ng-template>
In my component
@ViewChild('column1 ') public column1 : TemplateRef<any>;
Then when defining my columns
header: 'Dept 1',
columns: [
{
header: '2014',
columns: [
{
header: 'Sales',
binding: 'Dept_1_sales'
cellTemplate: [ this.column1 ];
},
Is something like this possible, or could it be implemented as a feature?
Thank you.