Columnchooser with dynamic header in column

[Jonam]

Hello,

i have a grid with a dynamic header. Works fine but when i choose your solution for a column chooser then the application crashes. Is their any work around possible here? If you wish i can send the complete soure code i  have a the source for a test project ready for you.

kind regards,

Jonam


Columchooser

<controls:ChildWindow x:Class="ColumnSelectorBudget.ColumnChooser"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
           Width="400" Height="300"
           Title="ColumnChooser">
        <Grid x:Name="LayoutRoot" Margin="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
                <RowDefinition Height="55"/>
            </Grid.RowDefinitions>
            <TextBlock x:Name="textBlockAvailableColumns" Text="Beschikbare velden:" />
            <ListBox ItemsSource="{Binding Kolommen}" Grid.Row="1">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <CheckBox Content="{Binding Header}" IsChecked="{Binding IsVisible, Mode=TwoWay}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <Button x:Name="OnButton" Grid.Row="2"   Content="Alles aan" Width="75"  HorizontalAlignment="Left"  VerticalAlignment="Center" Click="OnButton_Click" />
            <Button x:Name="OffButton" Grid.Row="2" Margin="80,0,0,0"  Content="Alles uit"  HorizontalAlignment="Left"  VerticalAlignment="Center" Click="OffButton_Click" />
            <Button x:Name="CancelButton" Grid.Row="2"   Content="Sluit" Width="75"  HorizontalAlignment="Right"  Click="CancelButton_Click" VerticalAlignment="Center"  />
        </Grid>
</controls:ChildWindow>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;

namespace ColumnSelectorBudget
{
    public partial class ColumnChooser : ChildWindow
    {
        private readonly RadGridView _currentGrid;

        public ColumnChooser(RadGridView grid)
        {
            InitializeComponent();

            _currentGrid = grid;

            //this.DataContext = grid;
            DataContext = this;
        }

        public GridViewColumnCollection Kolommen
        {
            get
            {
                return _currentGrid.Columns;
            }
        }

        private void CancelButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = false;
        }

        private void OnButton_Click(object sender, RoutedEventArgs e)
        {
            foreach (var item in _currentGrid.Columns)
                item.IsVisible = true;
        }

        private void OffButton_Click(object sender, RoutedEventArgs e)
        {
            foreach (var item in _currentGrid.Columns)
                item.IsVisible = false;
        }
    }
}

Application:

<telerik:RadGridView.Columns>

                <telerik:GridViewDataColumn DataMemberBinding="{Binding Label1}">

                    <telerik:GridViewDataColumn.Header>

                        <TextBlock Text="{Binding Label1,Source={StaticResource Headers}}" />

                    </telerik:GridViewDataColumn.Header>

                </telerik:GridViewDataColumn>

            </telerik:RadGridView.Columns>

 

 

 xmlns:helpers="clr-namespace:ColumnSelectorBudget"

        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>

        <helpers:LabelHeaders x:Key="Headers" />

    </UserControl.Resources>

 

 

    public class LabelHeaders

    {

        public string Label1

        {

            get

            {

                // normally a dynamic property

                return "Label1";

            }

        }

    }



[Dimitrina]

Hello Jonam,

 I have tested the solution suggested in this blog post. but I did not encounter any problem. Is this the solution that you reference? What is the exception you get?

Kind regards,
Didie
the Telerik team

[Kalli Kaldi]

Hello Didie

I'm trying to implement the column chooser from the blog post and I have one question.

What if I have a TextBlock to display my header info?  I.e. I have a column in my RadGridView defines like this :


<telerik:GridViewDataColumn  Width="50" DataMemberBinding="{Binding Path=Id}" >
  <telerik:GridViewDataColumn.CellTemplate>
    <DataTemplate>
      <HyperlinkButton Content="{Binding Path=Id}" Tag="{Binding Path=.}" Click="HyperlinkButton_Click" />
    </DataTemplate>
  </telerik:GridViewDataColumn.CellTemplate>
  <telerik:GridViewDataColumn.Header>
    <TextBlock ToolTipService.ToolTip="Einkvæmt auðkenni samnings" telerik:StyleManager.Theme="Windows8">
      Nr
    </TextBlock>
  </telerik:GridViewDataColumn.Header>
</telerik:GridViewDataColumn>

The reason for doing this is to display the ToolTip.  However, this makes the project crass with binding error because the column chooser is trying to bind to the TextBlock instead of the Header (which is a string property).

Can I customize the binding somehow or maybe create a custom usercontrol that would solve this issue for me?

Best regards,
Kalli

[Dimitrina]

Hi Kalli,

This blog is quite old and we now have more recent examples to suggest. I can recommend you checking the Header Context Menu online demo, the ControlPanel online demo and the ColumnChooser GitHub example.

As a side note - although GitHub is a very well-known platform we saw a better and easier approach for reviewing our examples developing our SDK Samples Browser. You can install it to use it to easily review and edit the examples.

Regards,
Didie
Telerik

 

 

[Kalli Kaldi]

Hi Dimitrina.

I realize the blog is old, but the question is still a valid one.  The ColumnChooser example doesn't work if any of the columns have the header defined as a TextBlock.  How can I solve that ?

Best regards,
Kalli

[Dimitrina]

Hi Kalli,

I was able to reproduce the issue. The reason is that the Content of the CheckBox is directly bound to the Header of the Column which is an object. 

<CheckBox Content="{Binding Header}" IsChecked="{Binding IsVisible, Mode=TwoWay}" /> 

You can define it setting a text for it directly. For example:

<telerik:GridViewDataColumn>

    <telerik:GridViewDataColumn.Header>
           Custom

    </telerik:GridViewDataColumn.Header>

</telerik:GridViewDataColumn>

As you need to assign a Tooltip to be displayed for the header, I can suggest you using the following approach:

<telerik:GridViewDataColumn DataMemberBinding="{Binding Id}">
    <telerik:GridViewDataColumn.HeaderCellStyle>
        <Style TargetType="telerik:GridViewHeaderCell">
            <Setter Property="ToolTipService.ToolTip" Value="My very long header">
            </Setter>
        </Style>
    </telerik:GridViewDataColumn.HeaderCellStyle>
</telerik:GridViewDataColumn>

How does this work for you?

Regards,
Dimitrina
Telerik