[Solved] Customize headercontextmenu for column visibility

[Tim]

I have a grid with a large number of columns.  I would like to customize the headercontextmenu to show/hide groups of columns rather than having to select individual columns in the default.  I haven't gotten very far, but the small code sample below will give an indication of what I'm trying to do.  If someone has tackled this before, I would appreciate it if you could point me in the right direction.


        void HeaderContextMenu_PreRender(object sender, EventArgs e)
        {
            RadContextMenu menu = RadGrid1.HeaderContextMenu;

            RadMenuItem showColumnGroup1 = new RadMenuItem();
            showColumnGroup1.Text = "Show Group 1";
            showColumnGroup1.Attributes["ColumnName"] = string.Empty;
            showColumnGroup1.Attributes["TableID"] = string.Empty;
            showColumnGroup1.PostBack = true;
            showColumnGroup1.Visible = false;
            menu.Items.Add(showColumnGroup1);

            RadMenuItem hideColumnGroup1 = new RadMenuItem();
            hideColumnGroup1.Text = "Hide Group 1";
            hideColumnGroup1.Attributes["ColumnName"] = string.Empty;
            hideColumnGroup1.Attributes["TableID"] = string.Empty;
            hideColumnGroup1.PostBack = true;
            menu.Items.Add(hideColumnGroup1);

            RadMenuItem showColumnGroup2 = new RadMenuItem();
            showColumnGroup2.Text = "Show Group 2";
            showColumnGroup2.Attributes["ColumnName"] = string.Empty;
            showColumnGroup2.Attributes["TableID"] = string.Empty;
            showColumnGroup2.PostBack = true;
            showColumnGroup2.Visible = false;
            menu.Items.Add(showColumnGroup2);

            RadMenuItem hideColumnGroup2 = new RadMenuItem();
            hideColumnGroup2.Text = "Hide Group 2";
            hideColumnGroup2.Attributes["ColumnName"] = string.Empty;
            hideColumnGroup2.Attributes["TableID"] = string.Empty;
            hideColumnGroup2.PostBack = true;
            menu.Items.Add(hideColumnGroup2);

            ...

[Yavor]

Hi Tim,

Basically, the default context menu cannot be greatly customized. If you want to significantly alter its layout and/or functionality, you can use a separate menu, which you can show when clicking on the header, or any of the other items in the control.
I believe the following example will get you started:

http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandmenu/defaultcs.aspx?product=grid

Sincerely yours,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tim]

Yavor,

Thanks for the reply.  I've considered your alternate approach and it may come down to that, but I actually made some progress utilizing the header context menu.  I can now get it to display or hide the groups of columns that I want it to.  The only thing I can't seem to do is change the choices in the menu.  That is, once "Hide Group 1" has been selected, it should be hidden and replaced with "Show Group 1" next time the menu is accessed.  Is there a way to do this or is this one of those places where I'm going to run into customization limitations of the header context menu?

It's these lines of code that aren't doing what I'm trying to accomplish:

RadGrid1.HeaderContextMenu.Items[e.Item.Index].Visible = false;
RadGrid1.HeaderContextMenu.Items[e.Item.Index - 1].Visible = true;

 
Any help would be greatly appreciated.

Thanks,
Tim

Here is my C# code:

        protected void Page_Load(object sender, EventArgs e)
        {
            RadGrid1.HeaderContextMenu.PreRender += new EventHandler(HeaderContextMenu_PreRender);
            RadGrid1.HeaderContextMenu.ItemClick += new RadMenuEventHandler(HeaderContextMenu_ItemClick);
        }

        void HeaderContextMenu_PreRender(object sender, EventArgs e)
        {
            RadContextMenu menu = RadGrid1.HeaderContextMenu;

            RadMenuItem showColumnGroup1 = new RadMenuItem();
            showColumnGroup1.Text = "Show Group 1";
            showColumnGroup1.Attributes["ColumnName"] = string.Empty;
            showColumnGroup1.Attributes["TableID"] = string.Empty;
            showColumnGroup1.PostBack = true;
            showColumnGroup1.Visible = false;
            menu.Items.Add(showColumnGroup1);

            RadMenuItem hideColumnGroup1 = new RadMenuItem();
            hideColumnGroup1.Text = "Hide Group 1";
            hideColumnGroup1.Attributes["ColumnName"] = string.Empty;
            hideColumnGroup1.Attributes["TableID"] = string.Empty;
            hideColumnGroup1.PostBack = true;
            menu.Items.Add(hideColumnGroup1);

            RadMenuItem showColumnGroup2 = new RadMenuItem();
            showColumnGroup2.Text = "Show Group 2";
            showColumnGroup2.Attributes["ColumnName"] = string.Empty;
            showColumnGroup2.Attributes["TableID"] = string.Empty;
            showColumnGroup2.PostBack = true;
            showColumnGroup2.Visible = false;
            menu.Items.Add(showColumnGroup2);

            RadMenuItem hideColumnGroup2 = new RadMenuItem();
            hideColumnGroup2.Text = "Hide Group 2";
            hideColumnGroup2.Attributes["ColumnName"] = string.Empty;
            hideColumnGroup2.Attributes["TableID"] = string.Empty;
            hideColumnGroup2.PostBack = true;
            menu.Items.Add(hideColumnGroup2);

            RadMenuItem showColumnGroup3 = new RadMenuItem();
            showColumnGroup3.Text = "Show Group 3";
            showColumnGroup3.Attributes["ColumnName"] = string.Empty;
            showColumnGroup3.Attributes["TableID"] = string.Empty;
            showColumnGroup3.PostBack = true;
            showColumnGroup3.Visible = false;
            menu.Items.Add(showColumnGroup3);

            RadMenuItem hideColumnGroup3 = new RadMenuItem();
            hideColumnGroup3.Text = "Hide Group 3";
            hideColumnGroup3.Attributes["ColumnName"] = string.Empty;
            hideColumnGroup3.Attributes["TableID"] = string.Empty;
            hideColumnGroup3.PostBack = true;
            menu.Items.Add(hideColumnGroup3);
        }


        protected void HeaderContextMenu_ItemClick(object sender, RadMenuEventArgs e)
        {
            if (e.Item.Text == "Hide Group 1")
            {
                RadGrid1.MasterTableView.GetColumn("column_ten").Display = false;
                RadGrid1.MasterTableView.GetColumn("column_eleven").Display = false;
                RadGrid1.MasterTableView.GetColumn("column_twelve").Display = false;

                RadGrid1.HeaderContextMenu.Items[e.Item.Index].Visible = false;
                RadGrid1.HeaderContextMenu.Items[e.Item.Index - 1].Visible = true;
            }
            else if (e.Item.Text == "Show Group 1")
            {
                RadGrid1.MasterTableView.GetColumn("column_ten").Display = true;
                RadGrid1.MasterTableView.GetColumn("column_eleven").Display = true;
                RadGrid1.MasterTableView.GetColumn("column_twelve").Display = true;

                RadGrid1.HeaderContextMenu.Items[e.Item.Index].Visible = false;
                RadGrid1.HeaderContextMenu.Items[e.Item.Index + 1].Visible = true;
            }
            RadGrid1.Rebind();
        }

[Yavor]

Hello Tim,

You can get a reference to the menu, and alter the text on the client:

 protected void Page_Load(object sender, EventArgs e)
    {
        radGrid1.HeaderContextMenu.OnClientLoad = "clientLoad";
    }

and on the client:

 <script type="text/javascript">
       
        var menu;
        function columnContextMenu(sender, args)
        {
        var allItems = menu.get_allItems();
        allItems[4].set_text("test"); 
        }
       
        function clientLoad(sender, args)
        {
        menu = sender;
             
        }
       
        </script>


I hope this helps.

Regards,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.