Forums Home / Wijmo / General Discussion
Posted by: jason.brandt on 4 September 2018, 6:54 am EST
jason.brandt
Posted 4 September 2018, 6:54 am EST
I am trying to add a header row above the filter header row.
I want this row to have a custom text title and to show that columns sort arrow and sort that column on click.
I am able to add the row, but I am not sure how to add the column sort ability.
https://stackblitz.com/edit/angular-ezjcmk?file=app%2Fapp.component.ts
sharad.tomer
Posted 4 September 2018, 4:29 pm EST
Hi,
You can add extra header rows by inserting an instance of wijmo.grid.Row class into flexGrid.columnHeaders collection. For showing the custom text you may pass an object in Row’s constructor with custom text info for each column binding like:
let customDisplaytext = {
“id” : “idHeader”,
“name” : “nameHeader”
};
flexGrid.columnHeaders.insert(0, new wjcGrid.Row( customDisplayText ));
You may use formatItem event to add sort arrows.
Please refer to the addHeaderRow() method of the following updated sample:-
https://stackblitz.com/edit/angular-jfbvdu?file=app%2Fapp.component.ts
~Sharad
jason.brandt
Posted 5 September 2018, 9:59 am EST
This works in the stackblitz example, but does not work on my own code.
The handler headerFirstRowFormatter is only called once when the addheaderRow is called during initialization - then never called again during mouse clicks.
Why would the handler not be called?
(I have included my local .ts and .html files for reference) entitysearchgrid.component.zip
EDIT:
Other things that may be a factor =
My angular2 code is contained within a angularJS website
could this be caused by any wijmo files being missing/out of date?
sharad.tomer
Posted 5 September 2018, 5:15 pm EST
Hi,
Everything in the provided file seems to be fine.
Why would the handler not be called?
<<<<<<<<<<
It is supposed to be called everytime grid needs formatting. It might be possible that there might be some error in attaching the handler. Are there any error messages on console?
My angular2 code is contained within a angularJS website
<<<<<<<<<<
We cannot comment on this without any info on how it is implemented. Normally there should not be any issues as long as Grid is rendering properly.
could this be caused by any wijmo files being missing/out of date?
<<<<<<<<<<
For formatItem to work grid does not need any additional files, so if FlexGrid is rendering correctly then we can safely discard the possibility of missing files.
Try shifting the code in itemFormatter from headerFirstRowFormatter.
Refer to the following sample:- https://stackblitz.com/edit/angular-xvhhah?file=app%2Fapp.component.ts
Please let us if the problem still persists for you.
~Sharad
jason.brandt
Posted 6 September 2018, 3:24 am EST
I get no console errors. The grid renders perfectly and all other actions of the grid behave correctly.
Even if I move the location of the code in headerFirstRowFormatter…
When I click on row 0 nothing happens.
However, when I click on row 1 (the row with the filter boxes in it) = the handler fires just fine.
Could this be that grid.formatItem.addHandler(this.headerFirstRowFormatter.bind(this)); is attaching to wrong row?
Or could it be that the 0 row is not seen in the grids list of attached events?
The grid and handler act as if nothing happens when I click on row 0 …
sharad.tomer
Posted 6 September 2018, 9:34 pm EST
Hi,
As you mentioned that you the handler works fine for row 1, there could be some other handlers present which might be interfering.
Please make sure that there is no other mousedown/mouseup or sortingColumn handlers which are interfering with the normal working of the grid.
Can you please provide us with a small sample replicating your issue, that would be very helpful in investing the issue.
Also please mention the Wijmo build version you are using so that we may test it on the same version.
Regards
Sharad
jason.brandt
Posted 7 September 2018, 3:00 am EST
I got the latest build and replaced all CSS and .ts and .js files and did a full cache flush.
Everything works now.
So I think i had my node_modules out of sync with my CSS and NPMImages files.
Though that does mean that if files are out of sync or older than 01/01/2018 this issue may persist…
Thanks!
sharad.tomer
Posted 9 September 2018, 3:28 pm EST
Hi,
We are glad to hear that you were able to solve the problem.
Thanks for sharing the solution.
Best Regards
Sharad
