Datagrid: Parameterize visibility of "select all" checkbox

[Lucas Barros Ribeiro]

Summary

I don't know if the correct place to open this Issue is as "Contribution proposal", sorry if I opened it incorrectly.
There is a need to hide the "select all" button in Datagrid.

In my project, it is necessary to hide the "select all" button in the datagrid checkbox in specific cases.

Example:
There are several lines in a datagrid, and these lines have an "old path" field, where, if the field is filled in, it should only be possible to select lines that the field is also filled in. If the field is not filled in, it will only be possible to select lines where the field is not filled in. Because the treatment for these cases is different.

Then, I can configure the individual selection of each line through a function in ClrDgSelectable that will define whether or not the line can be selected. However, if there is nothing selected, and the user clicks on "select all", all lines will be selected, regardless of whether they pass the ClrDgSelectable check or not.

Use case

A viable solution is to create a directive for ClrDatagrid that allows you to pass a value of true or false, to display or not the "select all" checkbox.

Examples

Workaround

In this link I found the creation of a directive to carry out the workaround, however, the clarity version in stackblitz is 0.13.2, while in my project it is 13.16.0, which is probably why it didn't work.

Datagrid File
<clr-datagrid class="datagrid-compact" [(clrDgSelected)]="selected" [appClrCheckboxDisplay]="false" > </clr-datagrid>

Directive File

import { Directive, Input,AfterViewInit, ElementRef } from "@angular/core";

// This directive controls display of checkbox button in the Clarity datagrid column header

@Directive({
  selector: "[appClrCheckboxDisplay]"
})
export class ClrCheckboxDisplayDirective implements AfterViewInit {

  @Input("appClrCheckboxDisplay") display:boolean = false;

  constructor(private elementRef:ElementRef) {}

  ngAfterViewInit() {
    let elem = this.elementRef.nativeElement.querySelector(".datagrid-head");
    let checkbox = elem.getElementsByTagName("input");
    if (this.display == false) {
      checkbox[0].style.display = "none";
      checkbox[0].nextElementSibling.style.display = "none";
    }
  }
}

[Lucas Barros Ribeiro]

I've just update the directive as follow:

import { Directive, Input,AfterViewInit, ElementRef } from "@angular/core";

// This directive controls display of checkbox button in the Clarity datagrid column header

@Directive({
  selector: "[appClrCheckboxDisplay]"
})
export class ClrCheckboxDisplayDirective implements AfterViewInit {

  @Input("appClrCheckboxDisplay") display:boolean = false;

  constructor(private elementRef:ElementRef) {}

  ngAfterViewInit() {
    let elem = this.elementRef.nativeElement.querySelector(".datagrid-header");

    let checkbox = elem.querySelector("[role=columnheader]")
    if (this.display == false) {
      checkbox.style.visibility = "hidden";
      checkbox.nextElementSibling.style.visibility = "hidden";
    }
  }
}

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.