ASP.NET MVC Grid View - Use Drag-and-Drop To Add/Remove Columns (available now in v2011.1)

ASP.NET Team Blog
15 March 2011

Check out the new "Customization Window" feature of the DevExpress MVC GridView extension in DXperience v2011 volume 1:

ASP.NET MVC_GridView_Customization_Window

Drag-and-Drop Columns

The new feature allows you to drag-and-drop column from the MVC GridView on to a customization window. This customization window displays the hidden column headers.

And it's an easy way for your end-users to customize the grid's layout:

  • To hide a grid column, drag its header to the customization window
  • To make a column visible, drag its header from the customization window back to the Grid View's header panel

Set Popup Location

The popup Customization window can be customized too. Use the SettingsCustomizationWindow property to specify the customization window's availability and position.

Client-Side API

Use the following client-side methods to control the customization window's visibility:

  • ShowCustomizationWindow()
  • HideCustomizationWindow()
  • IsCustomizationWindowVisible()

Enable With One Line

To enable the customization window feature, just set the SettingsCustomizationWindow property to true:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

        settings =>
            settings.Name = "grid";
            settings.CallbackRouteValues = new { Controller = "GridView", Action = "CustomizationWindowPartial" };
            settings.ClientSideEvents.CustomizationWindowCloseUp = "grid_CustomizationWindowCloseUp";
            settings.Width = Unit.Percentage(100);
            settings.SettingsCustomizationWindow.Enabled = true;
            settings.Settings.ShowGroupPanel = true;

            settings.Columns.Add("Region").Visible = false;

What do you think of the "Customization Window" feature of the DevExpress MVC GridView extension? Download DXperience v2011.1 or great and drop me a line below with your thoughts.


Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now:

Read the latest news about DevExpress ASP.NET MVC Extensions

Download a free and fully-functional version of DXperience now:

Follow MehulHarry on Twitter

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Darren Pruitt
Darren Pruitt

Is there an example of this I can download?  I'm trying to implement this but can't quite figure it out.


3 May 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)


This feature will be supported by the upcoming release, DXperience v2011 volume 1.

3 May 2011
Jameel vm
Jameel vm

Remove sorting from mvc gridview and also the above 'Drag a column header here to group by that column' row and serching row

24 August 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)


Are you asking how to do that?

24 August 2011
Satheesh Kumar R Karuppusamy
Satheesh Kumar R Karuppusamy

how fast is this when we display more than 5,00,000 records.

19 April 2013
Donna Petrick
Donna Petrick

If my data is already grouped, is it possible to drag-and-drop an entire row from one group to the other?

2 May 2013
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)


No, because that would be changing the data. However, take a look at the Multi-column headers and see if that helps you:

2 May 2013

Please login or register to post comments.