Show / Hide Columns

[Shawn]

UPDATE: The answer was the Rebind() method.  I only noticed because that's the postback for the CommandItem's Refresh button.  I'll work on writing up more clearly my issue with putting the now-working-great checkboxes in a RadMenu.

Original Text:
I'm trying to create a menu to show and hide columns without using HeaderContextMenu.  My original idea was to use a Menu with checkboxes, but that work behaved very strangely, and did not actually hide anything.  The checkboxes would tend to disappear on postback.  I think my issue may have been with the item template class I wrote, but I'm not sure.  Also, the dropdown menu width would not widen for long checkbox labels in IE, but would in Chrome...  


Anyway, I've written a couple of examples of the functionality I'm looking for here, with just plain checkboxes, and a menu with just regular RadMenuItems.  The weird thing is that while these hide the columns just fine, if you change a hidden one to show again, it will not show until the user sorts or does some other operation.  This suggest I should call some kind of "refresh" method but I'm not able to find any.


As an aside, I'd be very curious about what the template class would look like for implementing this functionality with a menu of checkboxes.  I suspect I may have to somehow databind the columns to the checkboxes?  I'm not sure.

Markup:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="GridShowMenuExample._Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <asp:Panel ID="Panel1" BackColor="LightSalmon" runat="server">
        <asp:Label ID="Label1" Text="Example Checkboxes: " runat="server"></asp:Label>
        <asp:CheckBox ID="CheckBox1" Text="Alpha" OnCheckedChanged="onHideShowCheckboxChange"
            runat="server" AutoPostBack="true" Checked="true" />
        <asp:CheckBox ID="CheckBox2" Text="Beta" OnCheckedChanged="onHideShowCheckboxChange"
            runat="server" AutoPostBack="true" Checked="true" />
        <asp:CheckBox ID="CheckBox3" Text="Gamma" OnCheckedChanged="onHideShowCheckboxChange"
            runat="server" AutoPostBack="true" Checked="true" />
        <br />
        <telerik:RadMenu ID="HideShowMenuRoot" runat="server" ClickToOpen="true" SkinID="WebBlue">
            <Items>
                <telerik:RadMenuItem ID="HideShowMenu" runat="server" PostBack="False" Text="Hide/Show Columns">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
        <br />
        <br />
    </asp:Panel>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True"
        AutoGenerateColumns="False" CellSpacing="0" GridLines="None" OnNeedDataSource="radGrid_onNeedDataSource">
        <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        </ClientSettings>
        <MasterTableView>
            <%-- Autogenerated stuff --%>
            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
            </RowIndicatorColumn>
            <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
            </ExpandCollapseColumn>
            <EditFormSettings>
                <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                </EditColumn>
            </EditFormSettings>
            <%-- End Autogenerated Stuff --%>

            <Columns>
                <telerik:GridBoundColumn DataField="Alpha" HeaderText="Alpha" SortExpression="Alpha"
                    UniqueName="Alpha" FilterControlAltText="Filter Alpha column">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Beta" HeaderText="Beta" SortExpression="Beta"
                    UniqueName="Beta" FilterControlAltText="Filter Beta column">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Gamma" HeaderText="Gamma" SortExpression="Gamma"
                    UniqueName="Gamma" FilterControlAltText="Filter Gamma column">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <FilterMenu EnableImageSprites="False">
        </FilterMenu>
        <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
        </HeaderContextMenu>
    </telerik:RadGrid>
</asp:Content>

Code:

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace GridShowMenuExample {
    public partial class _Default : System.Web.UI.Page {

        protected override void OnInit(EventArgs args) {
            //Menu Generator
            foreach (GridColumn col in RadGrid1.Columns) {
                var item = new RadMenuItem();
                item.Text = col.UniqueName;
                HideShowMenu.Items.Add(item);
            }
            HideShowMenuRoot.ItemClick += new RadMenuEventHandler((clicksrc, clickargs) => {
                var menu = clicksrc as RadMenu;
                var col = RadGrid1.Columns.FindByUniqueName(menu.SelectedItem.Text);
                col.Visible = !col.Visible;
            });
        }

        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void radGrid_onNeedDataSource(object source, GridNeedDataSourceEventArgs e) {
            IList<ExampleClass> data = new List<ExampleClass>();
            data.Add(new ExampleClass {Alpha = "Stuff", Beta="Things", Gamma=42});
            data.Add(new ExampleClass {Alpha = "Stuff", Beta="Things", Gamma=42});
            data.Add(new ExampleClass {Alpha = "Stuff", Beta="Things", Gamma=42});
            data.Add(new ExampleClass {Alpha = "Stuff", Beta="Things", Gamma=42});
            RadGrid1.DataSource = data;
        }

        protected void onHideShowCheckboxChange(object source, EventArgs args) {
            var box = source as CheckBox;
            var col = RadGrid1.Columns.FindByUniqueName(box.Text);
            col.Visible = box.Checked;
        }

        private class ExampleClass {
            public string Alpha { get; set; }
            public string Beta { get; set; }
            public int Gamma { get; set; }
        }
    }
}

[Daniel]

Hello Shawn,

I would suggest that you try another approach. Sample code is shown below:

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    CheckBoxList1.SelectedIndexChanged += (s, a) =>
    {
        foreach (ListItem listItem in CheckBoxList1.Items)
        {
            RadGrid1.MasterTableView.RenderColumns
                .OfType<GridBoundColumn>()
                .Where(p => p.UniqueName == listItem.Text)
                .First().Visible = !listItem.Selected;
        }
        RadGrid1.Rebind();
    };
}

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    if (!IsPostBack)
    {
        CheckBoxList1.DataSource = RadGrid1.MasterTableView.RenderColumns.OfType<GridBoundColumn>();
        CheckBoxList1.DataBind();
    }
}

protected void radGrid_onNeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
    IList<ExampleClass> data = new List<ExampleClass>();
    data.Add(new ExampleClass { Alpha = "Stuff", Beta = "Things", Gamma = 42 });
    data.Add(new ExampleClass { Alpha = "Stuff", Beta = "Things", Gamma = 42 });
    data.Add(new ExampleClass { Alpha = "Stuff", Beta = "Things", Gamma = 42 });
    data.Add(new ExampleClass { Alpha = "Stuff", Beta = "Things", Gamma = 42 });
    RadGrid1.DataSource = data;
}

protected void onHideShowCheckboxChange(object source, EventArgs args)
{
    var box = source as CheckBox;
    var col = RadGrid1.Columns.FindByUniqueName(box.Text);
    col.Visible = box.Checked;
}

private class ExampleClass
{
    public string Alpha { get; set; }
    public string Beta { get; set; }
    public int Gamma { get; set; }
}

<asp:Panel ID="Panel1" BackColor="LightSalmon" runat="server">
    <asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true" DataTextField="UniqueName" DataValueField="Visible">
    </asp:CheckBoxList>
    <br />
    <br />
</asp:Panel>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True"
    AutoGenerateColumns="False" CellSpacing="0" GridLines="None" OnNeedDataSource="radGrid_onNeedDataSource">
    <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    </ClientSettings>
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="Alpha" HeaderText="Alpha" SortExpression="Alpha"
                UniqueName="Alpha" FilterControlAltText="Filter Alpha column">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Beta" HeaderText="Beta" SortExpression="Beta"
                UniqueName="Beta" FilterControlAltText="Filter Beta column">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Gamma" HeaderText="Gamma" SortExpression="Gamma"
                UniqueName="Gamma" FilterControlAltText="Filter Gamma column">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

I hope this helps.

Best regards,
Daniel
the Telerik team