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
close icon

How to customize header bar in Metro themed GridControl


If I have a GridControl themed as Metro, then my header bar has quite a large height, compared to the rest of the rows, and it has a thick blue line underneath it
Is there a way that I can either remove the thick blue line or change its color? Also is there a way that I can change the header bar's height so that it is the same height as the rest of the rows?
I'd like to be able to make these changes via code as opposed to in the designer.

gridControl1.GridVisualStyles = GridVisualStyles.Metro;
gridControl1.GridOfficeScrollBars = OfficeScrollBars.Metro;
gridControl1.MetroScrollBars = true;

See screenshot from your website:

Thanks for your help.

3 Replies

VK Vinish Kumar K Syncfusion Team April 27, 2015 07:25 AM UTC

Hi Taylour,

Thank you for your interested in Syncfusion products.

You can customize the metro theme in GridGroupingControl, using this customization you can change the thick border under header row. Please refer the below code. And also refer the KB links also. This will provide more information about this. Please let me know if you have any concerns. We will provide proper solution on this.

GridMetroColors theme = new GridMetroColors();

theme.HeaderBottomBorderWeight = GridBottomBorderWeight.Thin;

theme.HeaderBottomBorderColor = Color.Black;


KB link : http://www.syncfusion.com/kb/4494/how-to-customize-the-colors-of-metro-theme

Vinish K.

TH Thomas February 9, 2019 06:33 PM UTC


is that correct. When I use this settings it is impossible to set this?

gridControl1.TableDescriptor.TableOptions.ColumnHeaderRowHeight = 45;

BR Thomas

SP Subburaj Pandian Veluchamy Syncfusion Team February 11, 2019 11:44 AM UTC

Hi Thomas, 
Thank you for using Syncfusion products. 
By default, your shared code part will work to change the GridGroupingControl column header height. If it is not working, we suspect that your may change the GridVisulaStylesafter that ColumnHeaderRowHeight settings. Please refer the following code example and the sample. 
this.gridGroupingControl1.TableDescriptor.TableOptions.ColumnHeaderRowHeight = 100; 
//The below settings override the ColumnHeaderRowHeight settings by default ColumnHeaderRowHeight. 
this.gridGroupingControl1.GridVisualStyles = GridVisualStyles.Metro; 
//Use this suggestion 
this.gridGroupingControl1.GridVisualStyles = GridVisualStyles.Metro; 
this.gridGroupingControl1.TableDescriptor.TableOptions.ColumnHeaderRowHeight = 100; 
Please get back us, if you need any further assistance on this. 
Subburaj Pandian V  

Live Chat Icon For mobile
Up arrow icon