GridView Header CheckBox is not centered on GridViewCheckBoxColumn

1 Answer 424 Views
GridView
Cristi
Top achievements
Rank 1
Cristi asked on 06 Mar 2023, 06:17 PM

Hi,

I'm trying to display the check box in the header of a GridViewCheckBoxColumn and have it centered but it is still not aligned with the rest of the rows. 

I set the column property HeaderCheckBoxAlignment = ContentAlignment.MiddleCenter but still there is a gap. Please see the image attached.

Thank you,

1 Answer, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 07 Mar 2023, 01:43 PM

Hello Cristi,

Thank you for the provided image.

You can try setting the HeaderCheckBoxPosition property of the GridViewCheckBoxColumn instead. This property can be set to HorizontalAlignment.Center and it should position the header checkbox in the center of the header cell.

Give it a try and share the outcome.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Cristi
Top achievements
Rank 1
commented on 07 Mar 2023, 02:49 PM

Hi Dinko,

Thank you for your answer, but unfortunately it still does not work. I have HeaderCheckBoxPosition property already set to Center.

I think the issue with the misaligned between Header checkbox and Rows checkboxes (as you can see in the image attached first time) is coming from the filter icon of the column. If the filtering is disabled the alignment is fine. Once the filtering is enabled, then the alignment is different.

Can you give me another solution how to center align header and   rows checkbox when the filter is enabled?

Thank you,

Dinko | Tech Support Engineer
Telerik team
commented on 08 Mar 2023, 09:17 AM

I have enabled the filter functionality and the checkbox is still centered while the filter icon is visible.

Can you share which theme is applied to the RadGridView? Maybe this misalignment comes from the theme. 

Cristi
Top achievements
Rank 1
commented on 08 Mar 2023, 03:01 PM

Hi,

The theme is the ControlDefault , but I dont think the issue is related to this.

The problem is with Grid View with Excel Like Filtering, the icon filter is displayed on the column filter as you can see in the picture below. There is a  gap between header column checkbox alignment and others row checkbox .

Dinko | Tech Support Engineer
Telerik team
commented on 09 Mar 2023, 09:14 AM

Using Excel-Like filtering was the key that I need. You are right that in this case, the RadCheckBox element inside the header cell is not centered correctly. You can easily fix that by subscribing to the ViewCellFormatting event of the control. Inside the event handler, you can move the checkbox 8 px to the right.

 this.radGridView1.ViewCellFormatting += RadGridView1_ViewCellFormatting;

private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    if (e.CellElement is GridCheckBoxHeaderCellElement )
    {
        var checkBoxCell = e.CellElement as GridCheckBoxHeaderCellElement;
        checkBoxCell.CheckBox.PositionOffset = new SizeF(8,0);
    }
}

Cristi
Top achievements
Rank 1
commented on 09 Mar 2023, 03:57 PM

Thank you Dinko! It works!
Tags
GridView
Asked by
Cristi
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or