Merge DataGrid ColumnHeaders

Posted by Vishal on Stack Overflow See other posts from Stack Overflow or by Vishal
Published on 2014-08-24T21:04:01Z Indexed on 2014/08/24 22:20 UTC
Read the original article Hit count: 223

Filed under:
|
|

I would like to merge two column-Headers. Before you go and mark this question as duplicate please read further. I don't want a super-Header. I just want to merge two column-headers. Take a look at image below:

enter image description here

Can you see two columns with headers Mobile Number 1 and Mobile Number 2? I want to show there only 1 column header as Mobile Numbers.

Here is the XAML used for creating above mentioned dataGrid:

<DataGrid Grid.Row="1" Margin="0,10,0,0" ItemsSource="{Binding Ledgers}" IsReadOnly="True" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Customer Name" Binding="{Binding LedgerName}" />
        <DataGridTextColumn Header="City" Binding="{Binding City}" />
        <DataGridTextColumn Header="Mobile Number 1" Binding="{Binding MobileNo1}" />
        <DataGridTextColumn Header="Mobile Number 2" Binding="{Binding MobileNo2}" />
        <DataGridTextColumn Header="Opening Balance" Binding="{Binding OpeningBalance}" />
    </DataGrid.Columns>
</DataGrid>

Update1:

enter image description here

Update2

I have created a converter as follows:

public class MobileNumberFormatConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value != null && value != DependencyProperty.UnsetValue)
        {
            if (value.ToString().Length <= 15)
            {
                int spacesToAdd = 15 - value.ToString().Length;
                string s = value.ToString().PadRight(value.ToString().Length + spacesToAdd);
                return s;
            }

            return value.ToString().Substring(0, value.ToString().Length - 3) + "...";
        }

        return "";
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

I have used it in XAML as follows:

<DataGridTextColumn Header="Mobile Numbers">
    <DataGridTextColumn.Binding>
        <MultiBinding StringFormat=" {0} {1}">
            <Binding Path="MobileNo1" Converter="{StaticResource mobileNumberFormatConverter}"/>
            <Binding Path="MobileNo2" Converter="{StaticResource mobileNumberFormatConverter}"/>
        </MultiBinding>
    </DataGridTextColumn.Binding>
</DataGridTextColumn>

The output I got:

enter image description here

Update3:

At last I got the desired output.

Here is the code for Converter:

public class MobileNumberFormatConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value != null && value != DependencyProperty.UnsetValue)
        {
            if (parameter.ToString().ToUpper() == "N")
            {
                if (value.ToString().Length <= 15)
                {
                    return value.ToString();
                }
                else
                {
                    return value.ToString().Substring(0, 12);
                }
            }
            else if (parameter.ToString().ToUpper() == "S")
            {
                if (value.ToString().Length <= 15)
                {
                    int spacesToAdd = 15 - value.ToString().Length;
                    string spaces = "";
                    return spaces.PadRight(spacesToAdd);
                }
                else
                {
                    return "...";
                }
            }
        }

        return "";
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Here is my XAML:

<DataGridTemplateColumn Header="Mobile Numbers">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock>
                <Run Text="{Binding MobileNo1, Converter={StaticResource mobileNumberFormatConverter}, ConverterParameter=N}" />
                <Run Text="{Binding MobileNo1, Converter={StaticResource mobileNumberFormatConverter}, ConverterParameter=S}" FontFamily="Consolas"/>
                <Run Text="   " FontFamily="Consolas"/>
                <Run Text="{Binding MobileNo2, Converter={StaticResource mobileNumberFormatConverter}, ConverterParameter=N}" />
                <Run Text="{Binding MobileNo2, Converter={StaticResource mobileNumberFormatConverter}, ConverterParameter=S}" FontFamily="Consolas"/>
            </TextBlock>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Output:

enter image description here

© Stack Overflow or respective owner

Related posts about c#

Related posts about wpf