RadGridView - Show/Hide Columns Using Context Menu

Default Way to Show/Hide Columns in RadGridView

By default, to hide a column, user needs to click "Hide Column" in the context menu; to show a column, user needs to drag the column from the column chooser to the grid.

It's not a user-friendly way.

Use Context Menu to  Show/Hide Columns in RadGridView

In this article, I'll show how to show/hide columns using the context menu.

First, you need to register the event handler.

radGridView.ContextMenuOpening += new ContextMenuOpeningEventHandler(radGridView_ContextMenuOpening);

Next, add the implementation.

void radGridView_ContextMenuOpening(object sender, ContextMenuOpeningEventArgs e)
{
 if (e.ContextMenu == null || e.ContextMenu.Items == null)
  return;

 RadGridView radGridView = sender as RadGridView;

 if (radGridView == null)
  return;

 for (int i = 0; i < e.ContextMenu.Items.Count; i++)
 {
  if (e.ContextMenu.Items[i].Text == "Column Chooser" || e.ContextMenu.Items[i].Text == "Hide Column")
  {
   e.ContextMenu.Items[i].Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
  }
 }

 RadMenuItem hideColumnsMenuItem = new RadMenuItem();
 hideColumnsMenuItem.Text = "Show/Hide Columns";

 int noOfColumnVisible = 0;

 foreach (GridViewColumn col in radGridView.Columns)
 {
  if (col.IsVisible)
  {
   noOfColumnVisible++;
  }
 }

 foreach (GridViewColumn column in radGridView.Columns)
 {
  GridViewDataColumn col = column as GridViewDataColumn;

  if (col == null || col.IsGrouped)
   continue;

  CheckBoxTag checkBoxTag = new CheckBoxTag();

  checkBoxTag.ColumnName = col.UniqueName;
  checkBoxTag.ColumnWidth = col.Width;
  checkBoxTag.RadGridView = radGridView;
  checkBoxTag.RadMenuItem = hideColumnsMenuItem;

  RadCheckBoxElement columnVisibilityCheckBox = new RadCheckBoxElement();
  columnVisibilityCheckBox.MouseDown += new MouseEventHandler(columnVisibilityCheckBox_MouseDown);
  columnVisibilityCheckBox.Text = col.HeaderText;
  columnVisibilityCheckBox.Tag = checkBoxTag;

  if (column.IsVisible)
  {
   columnVisibilityCheckBox.ToggleState = ToggleState.On;

   if (noOfColumnVisible <= 1)
   {
    columnVisibilityCheckBox.Enabled = false;
   }
  }
  else
  {
   columnVisibilityCheckBox.ToggleState = ToggleState.Off;
  }

  hideColumnsMenuItem.Items.Add(columnVisibilityCheckBox);
 }

 e.ContextMenu.Items.Add(hideColumnsMenuItem);
}

void columnVisibilityCheckBox_MouseDown(object sender, MouseEventArgs e)
{
 RadCheckBoxElement checkBox = sender as RadCheckBoxElement;

 CheckBoxTag checkBoxTag = checkBox.Tag as CheckBoxTag;

 string name = checkBoxTag.ColumnName;
 RadGridView radGridView = checkBoxTag.RadGridView;
 RadMenuItem radMenuItem = checkBoxTag.RadMenuItem;

 GridViewDataColumn column = radGridView.Columns[name] as GridViewDataColumn;

 if (column == null)
  return;

 int noOfColumnVisible = 0;

 foreach (GridViewColumn col in radGridView.Columns)
 {
  if (col.IsVisible)
  {
   noOfColumnVisible++;
  }
 }

 if (noOfColumnVisible <= 1)
 {
  if (checkBox.ToggleState != ToggleState.On)
  {
   column.IsVisible = true;

   foreach (Object obj in radMenuItem.Items)
   {
    RadCheckBoxElement checkBox2 = obj as RadCheckBoxElement;

    if (checkBox2 == null)
     continue;

    checkBox2.Enabled = true;
   }
  }
 }
 else
 {
  if (checkBox.ToggleState == ToggleState.On)
  {
   column.IsVisible = false;

   noOfColumnVisible--;
   if (noOfColumnVisible == 1)
   {
    foreach (Object obj in radMenuItem.Items)
    {
     RadCheckBoxElement checkBox2 = obj as RadCheckBoxElement;

     if (checkBox2 == null)
      continue;

     CheckBoxTag checkBoxTag2 = checkBox2.Tag as CheckBoxTag;

     if (checkBoxTag2 == null)
      continue;

     string name2 = checkBoxTag2.ColumnName;
     RadGridView radGridView2 = checkBoxTag2.RadGridView;

     GridViewColumn column2 = radGridView2.Columns[name2] as GridViewColumn;

     if (column2 == null)
      continue;

     if (column2.IsVisible)
     {
      checkBox2.Enabled = false;
      break;
     }
    }
   }
  }
  else
  {
   column.IsVisible = true;
  }
 }
}

Then, add the class CheckBoxTag.

class CheckBoxTag
{
 public int ColumnWidth
 {
  set;
  get;
 }

 public string ColumnName
 {
  set;
  get;
 }

 public RadGridView RadGridView
 {
  set;
  get;
 }

 public RadMenuItem RadMenuItem
 {
  set;
  get;
 }
}

Illustration for Show/Hide Columns Using Context Menu

Finally, you could see the new menu item is added to the context menu with all columns inside it.

Now, just click the checkboxes to show/hide columns.