Blogs

News

Email Subscriptions

Mehul Harry's DevExpress Blog

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

     

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

Published Mar 15 2011, 11:57 AM by Mehul Harry (DevExpress)
Bookmark and Share

Comments

 

Darren Pruitt said:

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

Thanks,

May 3, 2011 5:32 PM
 

Mehul Harry (DevExpress) said:

Darren,

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

May 3, 2011 7:39 PM
 

Jameel vm said:

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

August 24, 2011 6:22 AM
 

Mehul Harry (DevExpress) said:

Jameel,

Are you asking how to do that?

August 24, 2011 6:25 PM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
More from DevExpress
Live Chat
Have a pre-sales question?
Need assistance with your evaluation?
We are here to help.
Chat is one of the many ways you can contact members of the DevExpress Team. We are available Monday-Friday between 8:30am and 5:00pm Pacific Time.
If you need additional product information, require pre-sales assistance, or want help with your order, write to us at info@devexpress.com or call us at
+1 (818) 844-3383.