disable and hide check all in a grid?

[Jan]

How can I disable checkall?

this.selectionOptions = {

      checkboxOnly: true,

      persistSelection: true,

      mode: 'Row',

    };

<ejs-dialog

  #sensorModal

  id='sensorModal'  

  showCloseIcon='true'

  isModal="true"

  width='990px'

  style="border-radius: 5px;"

  [visible]='isModalVisible'

  (close)="hideModal()"

  [closeOnEscape]="false"

  >

    <ng-template #content>

      <h3 class="header-popup">Sensores</h3>

      <div class="body-popup">

        <section>

          <ejs-grid

            #sensorTable

            id="sensorTable"

            [allowSelection]="true"

            [allowSorting]="true"

            [allowFiltering]="true"

            [allowPaging]="true"

            [columns]="columns"

            [dataSource]='gridDataSource'

            [pageSettings]="pageSettings"

            [editSettings]="editSettings"

            [sortSettings]="sortOptions"

            [filterSettings]="filterOptions"

            [selectionSettings]="selectionOptions"

            [editSettings]="editSettings"

            (rowSelected)='onRowSelected($event)'

            (rowDeselected)='onRowDeselected($event)'>

          </ejs-grid>

        </section>

      </div>

    </ng-template>

    <ng-template #footerTemplate>

      <div class="controls">

        <button id="cancelButton" class="btn__cancel buttons" (click)="hideModal()">Cancelar</button>

        <button id="acceptButton" class="btn__accept buttons" (click)="onAssignButtonClick()" [disabled]="selectedSensors.length === 0">Asignar</button>

      </div>

    </ng-template>

</ejs-dialog>

[Vikram Sundararajan]

Hi Jan,

Greetings from Syncfusion support,

Based on your query wants to disable and hide the header checkbox. To achieve this, you can use the queryCellInfo event and apply the class "e-checkbox-disabled" to the cell containing the checkbox. Additionally, you can add some custom CSS to style the disabled checkbox appropriately. Please refer the below code snippet and sample for more information,

[app.component.ts]

 

queryCellInfo(args) {

    if (args.cell.column.type == 'checkbox') {

      args.node.classList.add('e-checkbox-disabled');

    }

  }

 

[app.component.css]

 

.e-checkbox-disabled {

  background-color: #ddd;

  pointer-events: none;

}

 

.e-grid .e-gridheader tr th:first-child .e-frame{

  border-color: #ddd;

  pointer-events: none;

}

Sample-  https://stackblitz.com/edit/angular-dwmzas-lfbsek?file=src%2Fapp.component.html

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Vikram S