Posted by: lluppes | December 14, 2011

Tips for enhancing DevExpress Grids in MVC Websites

I’ve been doing a lot of work with MVC websites lately, and using the DevExpress tools to add extra functionality.  They work pretty well right out of the box, but you can easily add some extra functionality without much extra code.  Here are a couple of cheatsheets that I used for those extra features.

How to add data customization to your MVC DevExpress Grid

Ever want to add extra fields in your grid that are available if needed, but not there all the time?  Add the fields to your grid but mark them as Visible = false.  With this option, the user can decide when they want to add them to the grid themselves.  I find that very useful to add things like the record key to the grid – most of the time you don’t want to see it, but occasionally it’s extremely helpful when you are troubleshooting issues.

1. Create an include file _GridCustomizationButton.cshtml in your shared folder

<br />
<div><input type="button" id="btShowCustomizationWindow"
  value="Show Additional Fields"
  onclick="javascript:UpdateCustomizationWindowVisibility();";
  style="font-size: .7em; background-color:#B6DBF2; color:#000000; text-shadow:#cccccc 0 -1px 0"/>
</div>

2. Add buttons to your Grid View Page (i.e. index.cshtml)

@Html.Partial("GridViewPartial", Model)
@Html.Partial("../Shared/_GridCustomizationButton")

3. Add a couple of client-side functions in your base _Layout.cshtml page

<script type="text/javascript">
function grid_CustomizationWindowCloseUp(s, e) {
  UpdateButtonText();
}
function UpdateCustomizationWindowVisibility() {
  if (dxGridView.IsCustomizationWindowVisible())
    dxGridView.HideCustomizationWindow();
  else
    dxGridView.ShowCustomizationWindow();
  UpdateButtonText();
}
function UpdateButtonText() {
  var text = dxGridView.IsCustomizationWindowVisible() ?
    "Hide" : "Show";
  text += " Additional Fields";
  $("#btShowCustomizationWindow").val(text);
}
</script>

4. Add calls to those client-side functions in your GridViewPartial.cshtml page

@Html.DevExpress().GridView( settings => {
  settings.Name = "dxGridView";
  settings.CallbackRouteValues = new {
    Controller = "YourController",
    Action = "GridViewPartial" };
  settings.ClientSideEvents.CustomizationWindowCloseUp =
    "grid_CustomizationWindowCloseUp";
  settings.SettingsCustomizationWindow.Enabled = true;

How to add data exporting to your MVC DevExpress Grid

Do your users ever ask if they can export this data to Excel?  With this tip, you can add an export to Excel or PDF button below each grid with very little effort.

1. Add buttons to your Grid View Page (i.e. index.cshtml)

@Html.Partial("GridViewPartial", Model)
@Html.Partial("../Shared/_GridCustomizationButton")
@using (Html.BeginForm("ExportTo", "YourController"))
{
  @Html.Partial("../Shared/_GridExportButtons")
}

2. Here’s the include file _GridExportButtons.cshtml page

<input type="submit" name="PDF" value="Export to PDF" style="font-size: .7em; background-color:#B6DBF2; color:#000000; text-shadow:#cccccc 0 -1px 0"/>
<input type="submit" name="XLS" value="Export to XLS" style="font-size: .7em; background-color:#B6DBF2; color:#000000; text-shadow:#cccccc 0 -1px 0"/>
<input type="submit" name="XLSX" value="Export to XLSX" style="font-size: .7em; background-color:#B6DBF2; color:#000000; text-shadow:#cccccc 0 -1px 0"/>
<input type="submit" name="CSV" value="Export to CSV" style="font-size: .7em; background-color:#B6DBF2; color:#000000; text-shadow:#cccccc 0 -1px 0"/>

3. Add a couple of functions to your Controller

public ActionResult ExportTo()
{
  var YourTableList = YourTableDB.FindAll(GetUserId()).ToList();
  if (Request.Params["PDF"] != null) { return GridViewExtension.ExportToPdf(CreateExportGridViewSettings(), YourTableList); }
  else if (Request.Params["XLS"] != null) { return GridViewExtension.ExportToXls(CreateExportGridViewSettings(), YourTableList); }
  else if (Request.Params["XLSX"] != null) { return GridViewExtension.ExportToXlsx(CreateExportGridViewSettings(), YourTableList); }
  else if (Request.Params["CSV"] != null) { return GridViewExtension.ExportToCsv(CreateExportGridViewSettings(), YourTableList); }
  return RedirectToAction("Index");
}
private GridViewSettings CreateExportGridViewSettings()
{
  GridViewSettings settings = new GridViewSettings();
  settings.Name = "ExportGrid_YourTable";
  settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
  settings.Columns.Add("YourTableCode");
  settings.Columns.Add("YourTableName");
  settings.Columns.Add("YourTableFields");
  return settings;
}

How to add multiple header bands in MVC DevExpress Grid

Most grids have just one header row.  With this tip you can add multiple rows and group them together.  For more info, see http://mvc.devexpress.com/GridView/Bands.

1. Normally, to add a column to your grid, you’d declare it and add it to the settings object, like this:

MVCxGridViewColumn cEstimatedCost = new
  MVCxGridViewColumn("EstimatedCost", "Estimated Cost");
cEstimatedCost.Settings.AutoFilterCondition =
  DevExpress.Web.ASPxGridView.AutoFilterCondition.Contains;
settings.Columns.Add(cEstimatedCost);

2. To add another layer of column headers, you create a band object, and then add the columns to that band, like this:

settings.Columns.AddBand(InfoBand =>
{
  InfoBand.Caption = "Infection Information";
  InfoBand.HeaderStyle.HorizontalAlign =
    System.Web.UI.WebControls.HorizontalAlign.Center;
  MVCxGridViewColumn cPOA = new MVCxGridViewColumn("Field1", "Title1");
  cPOA.Settings.AutoFilterCondition =
    DevExpress.Web.ASPxGridView.AutoFilterCondition.Contains;
  InfoBand.Columns.Add(cPOA);
  MVCxGridViewColumn cProcedureCode = new
    MVCxGridViewColumn("Field2", "Title2");
  cProcedureCode.Settings.AutoFilterCondition =
    DevExpress.Web.ASPxGridView.AutoFilterCondition.Contains;
  InfoBand.Columns.Add(cProcedureCode);
});

Written by .

Advertisements

Responses

  1. Thanks! This was really helpful. I saw the example posted by DevEx for XLS export but for some reason it didn’t click until I saw your post.

    • Yes – the code on the DevX site is usually mostly there, but it’s usually missing something or other, so I started making some cheat sheets like these that we use all the time for these common functions.

  2. Thank you! Clear, easy to follow, flexible – and the *minimum* required so one can adapt to one’s own needs.

    I don’t think I’m particularly thick, but 3 months into using it and I still find DevExpress’s own documentation & examples often very hard to follow.

    • I agree – their examples are very obtuse and confusing. Looking at them, I’m usually sure it *can* be done, but I can’t figure out how. 🙂


What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: