We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid header checkbox, Angular 7+, TypeScript 3+

 Hi,

I have a grid with a column containing checkboxes, but setting the type as checkbox also generates a checkbox on the header.

Any idea on how to replace the header checkbox with the headerText and if that's not possible, "disable".

 columns: object[] = [
    { field: 'id', headerText: 'Name', textAlign: 'Right', width: 40 },
    { field: 'type', headerText: 'Type', textAlign: 'Right', width: 40 },
    { field: 'length', headerText: 'Length', textAlign: 'Right', width: 40 },
    { field: 'format', headerText: 'Format', textAlign: 'Right', width: 40 },
    { field: 'load', headerText: 'Load', type: 'checkbox', textAlign: 'Right', width: 20, } // needs to show headertext  (or be disabled)
  ];

Something like the property displayAsCheckBox is what im looking for, without the disabled column of checkboxes.

1 Reply

MS Madhu Sudhanan P Syncfusion Team January 11, 2019 11:22 AM UTC

Hi Laurens, 

Thanks for contacting Syncfusion support. 

You can use the headerTemplate of the column as follow to set the header text for the checkbox column. 


[ 
    . . . . 
    { field: 'load', headerText: 'Load',headerTemplate: "${headerText}", type: 'checkbox', textAlign: 'Right', width: 20, } // needs to show headertext  (or be disabled) 
  ]; 



Regards, 
Madhu Sudhanan P 


Loader.
Live Chat Icon For mobile
Up arrow icon