GridTreeColumn header style

[Pavel]

How I can set default header style in GridTreeColumn? 

I need set wrap mode = "Wrap" and text alignment

[Shakul Hameed M]

Hi Pavel,

 

Thanks for contacting Syncfusion.

 

We have analyzed your query and we can achieve your requirement by writing styles to GridTreeHeaderCellControl.

Please refer the following code snippet.

 

Code Snippet:

<Style TargetType="{x:Type TextBlock}" x:Key="WrappingStyle">

            <Setter Property="TextWrapping" Value="Wrap"/>

</Style>

       

<Style TargetType="{x:Type syncfusion:GridTreeHeaderCellControl}">

       <Setter Property="Template">

             <Setter.Value>

                <ControlTemplate TargetType="{x:Type syncfusion:GridTreeHeaderCellControl}">

                    <ContentPresenter Name="PART_ContentPresenter"

                               Content="{TemplateBinding Text}"

                                        ContentTemplate="{TemplateBinding ContentDataTemplate}">

                                                  

                       <ContentPresenter.Resources>

                                <Style TargetType="{x:Type TextBlock}"

                                          BasedOn="{StaticResource WrappingStyle}"/>

                        </ContentPresenter.Resources>  

                         

                    </ContentPresenter>

                </ControlTemplate>

           </Setter.Value>

      </Setter>

</Style>

 

In this, I have written the styles for GridTreeHeaderCellControl. And PART_ContentPresenter is the one, which is used as the ContentPresenter for displaying the text of the GridTreeHeaderCell.

And here, we have written the wrapping style.

 

We have prepared the sample based on your requirement and you can find the sample from below location.

 

Sample: GridTreeStyle with WrapText.zip

 

Please let us know, if you have any concerns.

 

Thanks,

Shakul Hameed

[Pavel]

Thanks for this answer!

And how can I do autoheight in header row?

[Shakul Hameed M]

Hi Pavel,

 

We have analyzed your query and we can achieve your requirement by using the ResizeRowsToFit() method like in the below code snippet.

The ResizeRowsToFit method changes the height of the rows (Make the rows to fit) based on the cell value.

 

Code snippet:

void ColumnWidths_LineSizeChanged(object sender, Syncfusion.Windows.Controls.Scroll.RangeChangedEventArgs e)

        {

         this.treeGrid.Model.ResizeRowsToFit(GridRangeInfo.Row(0), GridResizeToFitOptions.ResizeCoveredCells);         

        } 

 

We have prepared a sample based on your requirement. In this we have called the ResizeRowsToFit method whenever the Column resized by listening the ColumnWidths_LineSizeChanged event.

Please find the sample from the below location.

 

Sample: GridTree with Auto Header style.zip

 

Please let us know, if you have any concerns.                                                          

 

Thanks,

Shakul Hameed

[Pavel]

Thanks very much!

It's works!

[Pavel]

One question more..)

Can I take same functional in SfDataGrid control?

It is very important!

[Jai Ganesh S]

Hi Pavel,

 

We have analyzed your query. Please find the response for your query in SfDataGrid as below:

 

Query 1:

 

You can set the Styles for HeaderCell in SfDataGrid by writing the styles for  GridHeaderCellControl. Please find the following code snippet to illustrate this:

 

Code Snippet [ Xaml]:

 

 

<Style TargetType="syncfusion:GridHeaderCellControl">

      <Setter Property="Background" Value="Blue" />

      <Setter Property="Foreground" Value="Gray" />

</Style>

 

 

Query 2:

 

As of now, we don’t have the functionality to set the Header Row height as “Auto” in SfDataGrid. However, you can set the HeaderRow Height in SfDataGrid by using the “HeaderRowHeight” API. Please find the following code snippet to illustrate this:

 

CodeSnippet [ XAML]:

 

 

<syncfusion:SfDataGrid x:Name="datagrid"

                               HeaderRowHeight="60"

                               ItemsSource="{Binding GridItemSource}"

                               >

 

 

Please let us know if you need further assistance,

 

Thank you,

Jai Ganesh S