Fixed ColumnChooser

[Eric Santos]

Hi!

I'm using RadGridView and I need to let the grid ColumnChooser fixed as part of the layout, as it was a component I can attach to another. As I could see and searched, the ColumnChooser is a floating window that is at the top.
Searching, I found out that I probably would get to what I need adding handles to the Shown event of the ColumnChooser (since every time it's shown a new instance is created), and call a move function that I have to implement to set the position of the ColumnChooser. As well, I would have to call this function every time the form is moved or re-sized.
Is there any other way to do something like a fixed ColumnChooser instead doing it?

Thanks in Advance!

[Stefan]

Hi Eric,

Thank you for writing.

Yes you can achieve the desired appearance with the grid and column chooser. We have an example demonstrating how to do it - GridView > CustomViews. For your convenience, here is the custom column chooser element you have to use:

public class ColumnChooserGridViewElement : GridVisualElement, IGridView
{
    #region Fields

    private RadTitleBarElement titleBar;
    private ColumnChooserElement columnChooser;
    private StackLayoutElement stackLayout;

    #endregion

    #region Initialization

    protected override void InitializeFields()
    {
        base.InitializeFields();

        this.StretchVertically = true;
        this.MinSize = new Size(200, 0);
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        this.stackLayout = new StackLayoutElement();
        this.stackLayout.Orientation = System.Windows.Forms.Orientation.Vertical;
        this.stackLayout.StretchVertically = true;
        this.stackLayout.StretchHorizontally = true;
        this.Children.Add(this.stackLayout);

        this.titleBar = new RadTitleBarElement();
        this.titleBar.Text = "Column Chooser";
        this.titleBar.StretchVertically = false;
        this.titleBar.AllowResize = false;
        this.titleBar.CloseButton.Visibility = ElementVisibility.Collapsed;
        this.titleBar.MinimizeButton.Visibility = ElementVisibility.Collapsed;
        this.titleBar.MaximizeRestore += new TitleBarSystemEventHandler(TitleBar_MaximizeRestore);
        this.stackLayout.Children.Add(this.titleBar);

        this.columnChooser = new ColumnChooserElement();
        this.columnChooser.StretchVertically = true;
        this.stackLayout.Children.Add(this.columnChooser);
    }

    #endregion

    #region Event Handlers

    private void TitleBar_MaximizeRestore(object sender, EventArgs args)
    {
        this.Visibility = ElementVisibility.Collapsed;
        this.GridViewElement.GridControl.ShowColumnChooser(this.columnChooser.ViewTemplate);

        this.GridViewElement.ColumnChooser.FormClosed -= new System.Windows.Forms.FormClosedEventHandler(ColumnChooser_FormClosed);
        this.GridViewElement.ColumnChooser.FormClosed += new System.Windows.Forms.FormClosedEventHandler(ColumnChooser_FormClosed);
    }

    private void ColumnChooser_FormClosed(object sender, System.Windows.Forms.FormClosedEventArgs e)
    {
        this.Visibility = ElementVisibility.Visible;
    }

    #endregion

    #region IGridView Members

    public void Initialize(RadGridViewElement gridElement, GridViewInfo viewInfo)
    {
        columnChooser.Initialize(gridElement, viewInfo);
    }

    public void Detach()
    {
        columnChooser.Detach();
    }

    public void UpdateView()
    {
        columnChooser.UpdateView();
    }

    public RadGridViewElement GridViewElement
    {
        get { return columnChooser.GridViewElement; }
    }

    public GridViewInfo ViewInfo
    {
        get { return columnChooser.ViewInfo; }
    }

    #endregion
}

and here is how to add it to the grid:

ColumnChooserGridViewElement columnChooserView = new ColumnChooserGridViewElement();
this.gridView.GridViewElement.Panel.Children.Insert(0, columnChooserView);
columnChooserView.SetValue(DockLayoutPanel.DockProperty, Telerik.WinControls.Layouts.Dock.Right);

I hope this helps.

Regards,
Stefan
Telerik

[Eric Santos]

Telerik with a great support as always! Thanks in advance for answering the question and also providing code examples!

So, I tested the code given. I have to use VB.NET here (*sigh*), so I made the adjusts to match the language. No big deal, except that I had to Implement the IGridView interface instead of inherit it. So, I had to override some obligated members, or simple remove the implement of the interface. Eighter way, things worked nice. I could see the ColumnChooser attached and fixed to the right side of the Grid.

But one thing didn't work and I still couldn't figure out how I can make it work. When I drag a column to the ColumnChoser, nothing happens, and the mouse pointer shows an "empty icon", as no action could be made there. Do I have to override another method, like some DragDrop method, and re-code to match the fixed ColumnChooser, or am I doing something wrong?

Thanks again!

[Eric Santos]

Never-mind!

The problem was with my code. I made some mistakes with the inherits and implements.
Just for a documentation, if anyone wants to convert this piece of code to VB.NET, pay attention to this:

VB.NET, as far as I know, doesn't support multiple inherits. So, the IGridView interface was as an implement.
Doing this, I had to explicit re-implement the methods for IGridView interface, with the same code as GridVisualElement inherited class. C# apparently accepts the same implement for both. VB.NET didn't accept it automatically for me. Damn VB! x)

So, here is the class re-written in VB.NET if someone needs to use:

Imports Telerik.WinControls.UI
Imports Telerik.WinControls

Public Class ColumnChooserGridViewElement
    Inherits GridVisualElement
    Implements IGridView

#Region "Fields"

    Private _titleBar As RadTitleBarElement
    Private _columnChooser As ColumnChooserElement
    Private _stackLayout As StackLayoutElement

#End Region

#Region "Initialization"

    Protected Overrides Sub InitializeFields()
        MyBase.InitializeFields()

        StretchVertically = True
        MinSize = New Size(200, 0)
    End Sub

    Protected Overrides Sub CreateChildElements()
        MyBase.CreateChildElements()

        _stackLayout = New StackLayoutElement()
        _stackLayout.Orientation = Orientation.Vertical
        _stackLayout.StretchVertically = True
        _stackLayout.StretchHorizontally = True
        Children.Add(_stackLayout)

        _titleBar = New RadTitleBarElement()
        _titleBar.Text = "Column Chooser"
        _titleBar.StretchVertically = False
        _titleBar.AllowResize = False
        _titleBar.CloseButton.Visibility = ElementVisibility.Collapsed
        _titleBar.MinimizeButton.Visibility = ElementVisibility.Collapsed
        AddHandler _titleBar.MaximizeRestore, AddressOf TitleBarMaximizeRestore
        _stackLayout.Children.Add(_titleBar)

        _columnChooser = New ColumnChooserElement()
        _columnChooser.StretchVertically = True
        _stackLayout.Children.Add(_columnChooser)
    End Sub

#End Region

#Region "Event Handlers"

    Private Sub TitleBarMaximizeRestore(sender As Object, args As EventArgs)
        Visibility = ElementVisibility.Collapsed
        GridViewElement.GridControl.ShowColumnChooser(_columnChooser.ViewTemplate)

        RemoveHandler GridViewElement.ColumnChooser.FormClosed, AddressOf ColumnChooserFormClosed
        AddHandler GridViewElement.ColumnChooser.FormClosed, AddressOf ColumnChooserFormClosed
    End Sub

    Private Sub ColumnChooserFormClosed(sender As Object, e As FormClosedEventArgs)
        Visibility = ElementVisibility.Visible
    End Sub

#End Region

#Region "IGridView Members"

    Public Sub Initialize(gridElement As RadGridViewElement, viewInfo As GridViewInfo)
        _columnChooser.Initialize(gridElement, viewInfo)
    End Sub

    Public Sub IGridView_Detach() Implements IGridView.Detach
        _columnChooser.Detach()
    End Sub

    Public Sub IGridView_Initialize(ByVal gridViewElement As RadGridViewElement, ByVal viewInfo As GridViewInfo) Implements IGridView.Initialize
        _columnChooser.Initialize(gridViewElement, viewInfo)
    End Sub

    Public Sub Detach()
        _columnChooser.Detach()
    End Sub

    Public Sub IGridView_UpdateView() Implements IGridView.UpdateView
        _columnChooser.UpdateView()
    End Sub

    Public Sub UpdateView()
        _columnChooser.UpdateView()
    End Sub

    Public ReadOnly Property IGridView_GridViewElement() As RadGridViewElement Implements IGridView.GridViewElement
        Get
            Return _columnChooser.GridViewElement
        End Get
    End Property

    Public ReadOnly Property GridViewElement() As RadGridViewElement
        Get
            Return _columnChooser.GridViewElement
        End Get
    End Property

    Public ReadOnly Property IGridView_ViewInfo() As GridViewInfo Implements IGridView.ViewInfo
        Get
            Return _columnChooser.ViewInfo
        End Get
    End Property

    Public ReadOnly Property ViewInfo() As GridViewInfo
        Get
            Return _columnChooser.ViewInfo
        End Get
    End Property

#End Region
End Class

Regards!

[Stefan]

Hey Eric,

I am glad everything is now OK on your end and thanks for sharing the code with the community. I am sure someone will benefit from it.

Should you have any other questions, do not hesitate to contact us.
 
Regards,
Stefan
Telerik