Columnchooser with dynamic header in column

6 posts, 0 answers
  1. Jonam
    Jonam avatar
    36 posts
    Member since:
    Jul 2010

    Posted 23 Jul 2012 Link to this post

    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: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";
                }
            }
        }

  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 24 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Kalli Kaldi
    Kalli Kaldi avatar
    27 posts
    Member since:
    Oct 2011

    Posted 11 Sep 2014 in reply to Dimitrina Link to this post

    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
  5. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 12 Sep 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  6. Kalli Kaldi
    Kalli Kaldi avatar
    27 posts
    Member since:
    Oct 2011

    Posted 15 Sep 2014 in reply to Dimitrina Link to this post

    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
  7. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 18 Sep 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
DevCraft banner