Remove Header Checkbox

Question

I want to remove the header checkbox and just show a header title on a column whose type is ColumnType.CheckBox. How can this be done?

Jeevakanth Palaniappan · Accepted Answer

Hi Tom,

We have validated your query and based on your requirement we have prepared a sample in which we removed the header checkbox from the DOM and added a header text. Please find the code snippet and the sample for your reference.

Host.cshtml

<head>

..

</head>

GridComponent.razor

@inject IJSRuntime JsRuntime

<SfGrid ID="Grid" DataSource="@Orders" AllowSelection="true" AllowPaging="true">

..

</SfGrid

@code{

protected override async Task OnAfterRenderAsync(bool firstRender)

{

await JsRuntime.InvokeAsync<object>("removeHeaderCheckBox");

}

Interop.js

window.removeHeaderCheckBox = function () {

var grid = document.getElementById('Grid');

var headerCells = grid.querySelectorAll('.e-headercell');

var count = 1

for (var i = 0; i < headerCells.length; i++) {

if (headerCells[i].querySelector('.e-checkbox-wrapper')) {

var span = this.document.createElement('span');

span.classList.add('e-headertext')

span.innerText = 'HeaderCheckbox ' + count;

count++;

headerCells[i].querySelector('.e-headercelldiv').appendChild(span);

headerCells[i].querySelector('.e-checkbox-wrapper').remove();

}

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/F1573071750046066

Please get back to us if you need further assistance.

Regards,

Jeevakanth SP.

Tom Corrigan · Answer

Excellent. It worked perfectly. Thank you.

Jeevakanth Palaniappan · Answer

Hi Tom, 

We are glad to here that your requirement is achieved. Please get back to us if you need further assistance. 

Regards, 
Jeevakanth SP.