Merge DataGrid ColumnHeaders
- by Vishal
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:
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:
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:
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:
