Row headers with checkboxes

Posted by: ken_perregaux on 21 May 2020, 4:05 am EST

  • 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 '<mat-checkbox></mat-checkbox>' nothing shows up.
    Any help would be greatly appreciated.
  • Replied 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
  • Replied 22 May 2020, 12:00 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
  • Replied 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
  • Replied 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).

  • Replied 26 May 2020, 12:12 am EST

  • Marked as Answer

    Replied 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!
  • Replied 26 May 2020, 2:41 pm EST

    Hi,

    I am glad that you were able to resolve the issue.

    ~regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels