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

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" %>

<% 
    Html.DevExpress().GridView(
        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("ContactName");
            settings.Columns.Add("CompanyName");
            settings.Columns.Add("City");
            settings.Columns.Add("Region").Visible = false;
            settings.Columns.Add("Country");
        })
        .Bind(Model)
        .Render();
%>

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.

Thanks!

Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions

Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/

Follow MehulHarry on Twitter

7 comment(s)
Darren Pruitt

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

Thanks,

3 May, 2011
Mehul Harry (DevExpress)

Darren,

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

3 May, 2011
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)

Jameel,

Are you asking how to do that?

24 August, 2011
Satheesh Kumar R Karuppusamy

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

19 April, 2013
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)

Donna,

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

demos.devexpress.com/.../Bands.aspx

2 May, 2013

Please login or register to post comments.