RadGridView Multiple Columns Sorting | Telerik Winforms 2010 SP1 - RadGridView - Multiple Columns Sorting

RadGridView supports multiple columns sorting in three ways:

RadGridView Multiple Columns Sorting at Design Time

At design time, you can enable multiple columns sorting following these steps:

1. Open designer view in Visual Studio;
2. Right click and then select "Open Property Builder" in the context menu;
3. In the property builder, select "GridViewTemplate" on the left pane;
4. Select "Advanced" tab on the right pane;
5. Search for "SortExpressions" in the property window below and then click the button on the right;
6. In the "GridSortField Collection Editor" dialog, add columns to be sorted.

RadGridView Multiple Columns Sorting By Program

You can enable multiple columns sorting programmatically; following these steps described here

RadGridView Multiple Columns Sorting at Runtime

At runtime, you can enable multiple columns sorting by holding "Shift" key and click on the headers of the columns to be sorted.

Telerik Winforms 2010 SP1 - RadGridView - Populate ComboBoxColumn Data Source at Runtime

Assume you have a grid view radGridView1 and you have a combobox column in it. The column's header text is "Status".

You could use the following code to populate its data source at runtime.

void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
  if (e.Column.HeaderText == "Status")
  {
    RadComboBoxEditor editor = this.radGridView1.ActiveEditor as RadComboBoxEditor;
    RadComboBoxEditorElement element = editor.EditorElement as RadComboBoxEditorElement;

    element.DataSource = new string[] { "UP", "DOWN" };    

    element.SelectedValue = null;
    element.SelectedValue = this.radGridView1.CurrentCell.Value;
  }
}

RadGridView – Animate Backcolor Of Grouped Row

The version of Telerik Winforms is 2010 SP1.

RadControls support animating many properties.

To animate the backcolor of a grouped row, you need to implement the ViewCellFormatting event handler with the following logic.

void radGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
 AnimatedPropertySetting setting = new AnimatedPropertySetting();

 setting.Property = GridCellElement.BackColorProperty;
 setting.StartValue = oldColor;
 setting.EndValue = newColor;
 setting.Interval = 100;
 setting.NumFrames = 50;
 setting.AnimatorStyle = AnimatorStyles.AnimateAlways;
 setting.ApplyEasingType = RadEasingType.Default;
 setting.UnapplyEasingType = RadEasingType.OutCircular;
 setting.ApplyValue(e.CellElement.RowElement);
}

RadGridView - Chagne Forecolor and Backcolor Of Grouped Row

The version of Telerik Winforms is 2010 SP1.

It's simple to change the forecolor, you need to implement the ViewCellFormatting event handler.

void radGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
 e.cellElement.ForeColor = Color.Blue;
}

While it's a little bit tricky to change the backcolor. You should not directly manipulate the cell element, like the following:

void radGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
 e.CellElement.BackColor = Color.Yellow
}

Instead, you need to use the row element.

void radGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
 e.CellElement.RowElement.BackColor = Color.Yellow
}

Telerik Winforms 2010 SP1 - RadGridView - Expand/Collapse Grouped Row with Single Click

Row grouping is supported by RadGridView. To expand/collapse a grouped row, user can double click the grouped row or single click the chevron icon .

Sometimes you may want to expand/collapse a grouped row with a single click (just like Windows XP collapsible panel). To achieve this, here is the solution.

void radGridView_CellClick(object sender, GridViewCellEventArgs e)
{
 if (sender is Telerik.WinControls.UI.GridGroupExpanderCellElement)
  return;

 GridViewGroupRowInfo rowInfo = e.Row as GridViewGroupRowInfo;
 if (rowInfo == null)
  return;

 rowInfo.IsExpanded = !rowInfo.IsExpanded;
}

Pay attention to code in line 3 and 4, since RadGridView already handled single click event, in this event handler, we need to exclude it.

RadGridView - Customize the Text of Grouped Row

Default Format for Grouped Row Text in RadGridView

By default, RadGridView appends a ";" to the text of a grouped row, looking like:

It's pretty ugly.

Customized Grouped Row Text

To remove it, you need to implement the GroupSumaryEvaluate event handler with a customized format.

void radGridView_GroupSumaryEvaluate(object sender, GroupSummaryEvaluationEventArgs e)
{
 if (e.SummaryItem.FieldName == "Name")
 {
  e.FormatString = String.Format("Name: {0}", e.Value);
 }
}

Here is the final view:

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.