Posted 16 May 2020, 1:58 pm EST
Hi Support,
First let me say what an excellent job you’ve done on the Wijmo controls. They are very powerful and well thought out. Now down to business. After a lot of time spent with the FlexGrid, I am making my first foray in to the PivotGrid. I understand that the PivotGrid inherits from FlexGrid. My grid is working, but not like I want it too. The header grouping order is different from what I want it to show. Because I cannot share my application details, I’ve mocked up a grid which shows which values are shown in the PivotPanel, how the grid renders currently, and how I would like it to render (see attached image).
In an effort to override the default functionality, I have tried the setting autogenerateColumns=false, but they generate anyway, no matter what I do. Forget about what I want for a second. If I set autoGenerateColumns=false, and do nothing else, there should be no columns. It renders as if I changed nothing. I am setting this before the itemsSource is set.
Next (and this assumes that the columns do not auto-generate), I have tried logic that implements the pattern shown here:
https://jsfiddle.net/Wijmo5/gobtdg7t/
It might work, but I wouldn’t know, because no matter what, it keeps auto-generating the columns.
Other insights:
1) I am building columns based upon a payload from the server. The full set of columns are not known at the time of page load. An AJAX call returns data that is interrogated to create the columns.
2) My attempt at trying to build the columns per the instructions in the link above is below. I had to modify it to remove some things that are proprietary, so it may not work as posted, but you should generally get the idea. There are no runtime exceptions.
My questions:
1) Is there any way to do what I want to do.
2) Assuming #1 is true, what is the best way to achieve what I want to do. If no coding errors, should the approach in the URL above work? Is there a better way? 3) Does setting autoGenerateColumns=false work in the PivotGrid. If so, why might it not be working here. If not, why not?
Thank you!
Eric
CODE SAMPLE:
import {Column,Row,AllowMerging} from 'wijmo/wijmo.grid';
export class Demo {
constructor() {
this.tests = [
{ binding: 'testA', header: 'testA'},
{ binding: 'testB', header: 'testB'},
]
//this is actually returned from the server
this.weeks = [
'week1','week2','week3'
]
//set prior to calling buildColumns
this.grid = null;
}
// ...
// SNIP
// ...
buildColumns(data) {
if(!this.grid) {
throw "no grid available";
}
let weeks = this.weeks
let headers = this.grid.columnHeaders;
headers.rows.splice(headers.rows.length, 0, new Row());
weeks.forEach((week) => {
this.tests.forEach((test) => {
let column = new Column();
column.binding = week +'_' + test.binding;
column.header = test.header
this.grid.columns.push(column);
headers.setCellData(0, headers.columns.length - 1, column.header);
});
});
mergeColumnGroups(this.grid);
// direct copy from the URL
function mergeColumnGroups(flex) {
debugger;
// merge headers
var colHdrs = flex.columnHeaders;
flex.allowMerging = AllowMerging.ColumnHeaders;
// merge horizontally
for (var r = 0; r < colHdrs.rows.length; r++) {
colHdrs.rows[r].allowMerging = true;
}
// merge vertically
for (var c = 0; c < colHdrs.columns.length; c++) {
colHdrs.columns[c].allowMerging = true;
}
// fill empty cells with content from cell above
for (var c = 0; c < colHdrs.columns.length; c++) {
for (var r = 1; r < colHdrs.rows.length; r++) {
var hdr = colHdrs.getCellData(r, c);
if (!hdr || hdr == colHdrs.columns[c].binding) {
var hdr = colHdrs.getCellData(r - 1, c);
colHdrs.setCellData(r, c, hdr);
}
}
}
// handle top-left panel
for (var c = 0; c < flex.topLeftCells.columns.length; c++) {
flex.topLeftCells.columns[c].allowMerging = true;
}
}
}
}
```[img]https://gccontent.blob.core.windows.net/forum-uploads/file-4cec68e2-d90e-4eb9-bbeb-160af6137075.png[/img]
