WPF dataGrid super Header for multiple columns

wpf wpf-controls wpfdatagrid wpf-4.0

14,436

Try This;->

You Just need to use 2 Rows and 3 Columns if you want the way your ScreenShot depicts. In First Row define your TextBlock with Grid.ColumnsSpan="3" which will take space for 3 Columns and In Second Row define each TextBlock in each Different Column:

     <DataGrid ItemsSource="{Binding  FisapCorrections,RelativeSource={RelativeSource AncestorType=Window},UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}">
        <DataGrid.Columns>
        <DataGridTemplateColumn Width="200">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="150"/>
                            <RowDefinition Height="150"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="70" />
                            <ColumnDefinition  Width="70"/>
                            <ColumnDefinition Width="70"/>
                        </Grid.ColumnDefinitions>

                                        <TextBlock Text="Main Header Text" Height="100" Grid.ColumnSpan="3" Grid.Row="0" Grid.Column="0"/>

                            <TextBlock Text="Text 1" Height="100" Grid.Column="0" Grid.Row="1"/>
                                        <TextBlock Text="Text 2" Grid.Column="1" Grid.Row="1"/>
                                        <TextBlock Text="Text 3" Grid.Column="2" Grid.Row="1"/>

                    </Grid>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>

14,436

user2500796

Updated on September 15, 2022

Comments

user2500796 over 1 year

I want to do Header for multiple columns in WPF DataGrid. I tried with Header template but it will display Header for one column.

Below XAML I have tried:

  <DataGrid>
        <DataGrid.Columns>
            <DataGridTextColumn>
                <DataGridTextColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock>Column 1</TextBlock>
                            <TextBlock>xyz</TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTextColumn.HeaderTemplate>
            </DataGridTextColumn>
            <DataGridTextColumn Header="Header" />
        </DataGrid.Columns>
    </DataGrid>

I am also attaching the My expected result screen shoot:

 <Grid Width="Auto">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <toolkit:DataGrid x:Name="problemsList"
                                      MinHeight="205"
                                      MaxHeight="205"
                                      Margin="3"
                                      VerticalAlignment="Top"
                                      AutoGenerateColumns="False"
                                      CanUserAddRows="False"
                                      CanUserDeleteRows="False"
                                      CanUserReorderColumns="False"
                                      CanUserResizeColumns="True"
                                      CanUserResizeRows="False"
                                      ColumnHeaderStyle="{StaticResource GridColumnHeaderStyle}"
                                      HorizontalScrollBarVisibility="Visible"
                                      ItemsSource="{Binding FisapCorrections}"
                                      MouseLeftButtonUp="problemsList_MouseLeftButtonUp"
                                      SelectionMode="Single"
                                      Sorting="problemsList_Sorting"
                                      VerticalScrollBarVisibility="Auto">
                        <toolkit:DataGrid.Columns>
                            <toolkit:DataGridTemplateColumn MinWidth="50"
                                                            CellTemplate="{StaticResource RowSelected}"
                                                            Header="Select" />
                            <toolkit:DataGridTextColumn MinWidth="88"
                                                        Binding="{Binding StudentName}"
                                                        Header="Student Name"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn x:Name="dgtcSSN"
                                                        MinWidth="50"
                                                        Binding="{Binding SSN}"
                                                        Header="SSN"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn x:Name="dgtcStuNum"
                                                        MinWidth="50"
                                                        Binding="{Binding StuNum}"
                                                        Header="StuNum"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn MinWidth="80"
                                                        Binding="{Binding Campus}"
                                                        Header="Campus"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn Width="50"
                                                        MinWidth="50"
                                                        Binding="{Binding BadModel,
                                                                          Converter={StaticResource ToEmptyStringConverter}}"
                                                        Header="BadModel"
                                                        HeaderTemplate="{StaticResource DepModelHeaderTemplate}"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn Width="72"
                                                        MinWidth="72"
                                                        Binding="{Binding BadPellEnrollStatus,
                                                                          Converter={StaticResource ToEmptyStringConverter}}"
                                                        CanUserReorder="False"
                                                        Header="BadPellEnrollStatus"
                                                        HeaderTemplate="{StaticResource EnrollStatusHeaderTemplate}"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn Width="75"
                                                        MinWidth="75"
                                                        Binding="{Binding DupePell,
                                                                          Converter={StaticResource ToEmptyStringConverter}}"
                                                        Header="DupePell"
                                                        HeaderTemplate="{StaticResource DupStudentPellHeaderTemplate}"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn Width="80"
                                                        MinWidth="80"
                                                        Binding="{Binding BadTransactionId,
                                                                          Converter={StaticResource ToEmptyStringConverter}}"
                                                        Header="BadTransactionId"
                                                        HeaderTemplate="{StaticResource InvTransactionIDHeaderTemplate}"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn Width="40"
                                                        MinWidth="40"
                                                        Binding="{Binding HasNoISIR,
                                                                          Converter={StaticResource ToEmptyStringConverter}}"
                                                        Header="HasNoISIR"
                                                        HeaderTemplate="{StaticResource NoISIRHeaderTemplate}"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn Width="75"
                                                        MinWidth="75"
                                                        Binding="{Binding GradWithSEOG,
                                                                          Converter={StaticResource ToEmptyStringConverter}}"
                                                        Header="GradWithSEOG"
                                                        HeaderTemplate="{StaticResource NotEligxSEOGHeaderTemplate}"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn Width="100"
                                                        MinWidth="100"
                                                        Binding="{Binding GradIsDependent,
                                                                          Converter={StaticResource ToEmptyStringConverter}}"
                                                        Header="GradIsDependent"
                                                        HeaderTemplate="{StaticResource GradWithDepModelHeaderTemplate}"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn Width="60"
                                                        MinWidth="60"
                                                        Binding="{Binding NoClasses,
                                                                          Converter={StaticResource ToEmptyStringConverter}}"
                                                        Header="NoClasses"
                                                        HeaderTemplate="{StaticResource NoClassesHeaderTemplate}"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTextColumn Width="65"
                                                        MinWidth="65"
                                                        Binding="{Binding Ineligible}"
                                                        Header="Ineligible"
                                                        HeaderTemplate="{StaticResource SchoolStatusHeaderTemplate}"
                                                        IsReadOnly="True" />
                            <toolkit:DataGridTemplateColumn IsReadOnly="True">
                                <toolkit:DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                    <TextBlock Text="Main Header Text" Grid.columnSpan="3" Grid.Row="0" Grid.Column="0"/>
                                    <TextBlock Text="Text 1" grid.Column="0" grid.Row="1"/>
                                    <TextBlock Text="Text 2" grid.Column="1" grid.Row="1"/>
                                    <TextBlock Text="Text 3" grid.Column="2" grid.Row="1"/>
                                    </DataTemplate>
                                </toolkit:DataGridTemplateColumn.CellTemplate>
                                <toolkit:DataGridTemplateColumn.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="Missing from FISAP Summary Part II Section F"
                                           TextWrapping="Wrap"
                                           Width="200"/>
                                    </DataTemplate>
                                </toolkit:DataGridTemplateColumn.HeaderTemplate>
                            </toolkit:DataGridTemplateColumn>
                        </toolkit:DataGrid.Columns>
                    </toolkit:DataGrid>
                    <CmcControls:WaitingControl x:Name="waitingControlOnGrid"
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center" />
                </Grid>

I want to add the Expected result in the Last of the Grid enter image description here

Vishal almost 11 years

Your Grid should be inside DataGrid..The way I Showed you have Defined Grid outside the DataGrid.That is why Grid.ColumnsSpan is not accessible.The Code I gave is working fine in my case.
user2500796 almost 11 years

thanks,but this is not the exact what i am looking for.you have created the grid inside the CellTemplate so alll the grid cells are same type.I am looking for one super Header with 3 columns.