Forums Home / Wijmo / General Discussion
Posted by: ken_perregaux on 21 May 2020, 4:05 am EST
ken_perregaux
Posted 21 May 2020, 4:05 am EST
I have successfully gotten checkboxes to work in row headers with the following…
this.flex.itemFormatter = function(panel, row, col, cell)
{
if (panel.cellType === wjGrid.CellType.RowHeader)
{
cell.innerHTML = '<input type="checkbox" class="select-check"/>';
}
};
However, when I went to use a material check box ‘’ nothing shows up.
Any help would be greatly appreciated.
ashwin.saxena
Posted 21 May 2020, 4:39 pm EST
Hi Ken,
While using itemFormatter, we cannot add an angular component or directive. The HTML added to the innerHTML is only simple plain HTML tags. If you wish to add angular components, then I would suggest you use cell templates in template side.
Please refer to the sample link below:
https://stackblitz.com/edit/angular-wncnim
Regards,
Ashwin
ken_perregaux
Posted 22 May 2020, 12:00 am EST - Updated 3 October 2022, 7:08 am EST
Thanks Ashwin, however we created a class which extends WjFlexGrid, which has the ng-template to display row numbers and when I add the template shown in your example to a grid in a component only 1 check box is added and it is underneath the table…see image.
So it is not overriding the ng-template
ashwin.saxena
Posted 25 May 2020, 3:53 pm EST
Hi Ken,
The cell template of the custom grid component will override the mat-checkbox template. There are many resolutions for your issue, but the best one is to add two columns in the rowHeaders and use one for the row numbers and other one for the checkboxes.
Also, instead of adding row numbers using cell template, I would suggest you use the formatItem event. Please refer to the updated sample below:
https://stackblitz.com/edit/angular-wncnim
~regards
ken_perregaux
Posted 26 May 2020, 12:12 am EST - Updated 3 October 2022, 7:08 am EST
ken_perregaux
Posted 26 May 2020, 12:15 am EST
Thank you so much, Ashwin, I am getting very close. I have the material checkboxes in each row header, however, there is still that rogue material checkbox at the bottom of the rows like the image above.
It is not the material checkbox, I can put anything in the template and it adds one at the bottom (even if there is no data).
ken_perregaux
Posted 26 May 2020, 12:44 am EST
OK so I figured it out. We had some strange template definitions in our custom component HTML. I removed them (and actually the whole HTML file) and everything works great!
ashwin.saxena
Posted 26 May 2020, 2:41 pm EST
Hi,
I am glad that you were able to resolve the issue.
~regards
ken_perregaux
Posted 8 June 2020, 7:09 am EST
Sorry, one more question. In your stackblitz when you check the row is highlighted but when you uncheck the row doesn’t get un-highlighted. I got it to work by making my table selection ListBox. However, it appears the first cell always is highlighted whether the row is selected or not. Is there a way to stop that from happening?
ashwin.saxena
Posted 8 June 2020, 3:55 pm EST
Hi Ken,
I used ListBox as the selectionMode but it seems that it does not work as expected. So, you may either use the RowRange selectionMode, which will prevent the selection of a single cell or you may use the default selectionMode with the workaround to unhighlight the row like in the sample below:
https://stackblitz.com/edit/angular-ezwbbc
~regards
ken_perregaux
Posted 8 June 2020, 11:14 pm EST - Updated 3 October 2022, 7:09 am EST
Hi Ashwin, thanks for the reply and that is what I am looking for. However, is there a way to make the selected row all the same highlight? This is a readonly table and first column always appears selected with a much darker color.
Also, the selected count (selectedRows or selectedItems) remains at one regardless of how many rows are selected using the checkbox, why is that I need to be able to tell how many rows are selected!
ashwin.saxena
Posted 9 June 2020, 8:55 pm EST
Hi Ken,
You can make the color of all the selected cells same by using the following CSS:
.wj-cell.wj-state-selected {
background: #80adbf !important;
}
Regarding the selectedItems, it seems that this was a bug but it has been fixed in the latest version (5.20201.680). I would recommend you upgrade to this version.
If you cannot upgrade right now, as a workaround, you can use your own selectedItems array and update in the onRowChange method. Please refer to the updated sample below:
https://stackblitz.com/edit/angular-fuyasm
~regards
ken_perregaux
Posted 10 June 2020, 1:48 am EST
Thanks Ashwin, I really appreciate all your help and suggestions! I have one last question, if I click in the row header with the checkbox but outside the checkbox it still selects the row and I would prefer that didn’t happen, is there a way to prevent that?
ashwin.saxena
Posted 10 June 2020, 3:53 pm EST
Hi Ken,
The selectionChanging event can be used in this case. In the event handler, you may cancel the event by setting the cancel property of event args to true. But, make sure that you add the handler after calling the select method with (-1, -1) parameters.
ngOnInit() {
this.grid.select(-1, -1); // remove the initial selection
this.grid.selectionChanging.addHandler((s, e) => e.cancel = true);
}
Note that this will prevent the grid to go into edit mode because a new cell cannot be selected now and without selection, you cannot edit that cell.
~regards
ken_perregaux
Posted 10 June 2020, 11:34 pm EST
Thanks I will give that a try! You can close this I believe I have enough to go by!
