DevExpress Hello World

Yesterday and today I spent some time making a corny dummy application which used a dx:ASPxGridView control from the DevExpress toolkit in the name of my learning DevExpress doings. I am brand new to DevExpress. I just spun up the default ASP.NET web forms app in Visual Studio 2013 and made Default.aspx look like this:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master"
      AutoEventWireup="true" CodeBehind="Default.aspx.cs"
      Inherits="DummyDevExpressApplication._Default" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.9.0,
      Culture=neutral, PublicKeyToken=b88d1754d700e49a"
      Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxGridView"
      Assembly="DevExpress.Web.v13.1, Version=13.1.9.0, Culture=neutral,
      PublicKeyToken=b88d1754d700e49a" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
   <dx:ASPxGridView ID="SolarSystem" ClientInstanceName="SolarSystem"
            runat="server" Width="100%" KeyFieldName="Name"
            AutoGenerateColumns="False" >
      <SettingsBehavior AutoExpandAllGroups="True" />
      <SettingsPager PageSize="15">
      </SettingsPager>
      <Settings ShowFilterRow="True" ShowGroupPanel="True" />
      <Styles AlternatingRow-Enabled="True">
         <AlternatingRow Enabled="True">
         </AlternatingRow>
      </Styles>
      <Columns>
         <dx:GridViewCommandColumn VisibleIndex="0" ButtonType="Link"
               Caption="Edit">
            <EditButton Visible="True">
            </EditButton>
         </dx:GridViewCommandColumn>
         <dx:GridViewDataTextColumn Caption="Name" FieldName="Name"
               VisibleIndex="1">
         </dx:GridViewDataTextColumn>
         <dx:GridViewDataTextColumn
               Caption="ClosestAstronomicalUnitDistanceFromSun"
               FieldName="ClosestAstronomicalUnitDistanceFromSun" VisibleIndex="2">
         </dx:GridViewDataTextColumn>
         <dx:GridViewDataComboBoxColumn FieldName="PlanetType"
               Caption="PlanetType" VisibleIndex="3">
            <PropertiesComboBox DataSourceID="PlanetTypeSource" ValueField="key"
                  TextField="value" ValueType="System.String"
                  DropDownStyle="DropDown" />
         </dx:GridViewDataComboBoxColumn>
         <dx:GridViewDataTextColumn Caption="MilesInDiameter"
               FieldName="MilesInDiameter" VisibleIndex="4">
         </dx:GridViewDataTextColumn>
         <dx:GridViewDataColumn FieldName="DiscoveryDate" VisibleIndex="5">
         </dx:GridViewDataColumn>
      </Columns>
      <SettingsEditing EditFormColumnCount="2" Mode="PopupEditForm" />
      <SettingsPopup>
         <EditForm Width="500" />
      </SettingsPopup>
      <SettingsPager Mode="ShowAllRecords" />
      <Settings ShowTitlePanel="true" />
      <SettingsText Title="Popup Edit Form Editing" />
   </dx:ASPxGridView>
   <asp:ObjectDataSource ID="PlanetTypeSource" runat="server" SelectMethod="SelectPlanetTypes" TypeName="DummyDevExpressApplication.Utilities.CommonSource">
   </asp:ObjectDataSource>
</asp:Content>

 
 

My sloppy work yields the following sloppy result. Note that I came out ahead for leaving the FieldName property unspecified in last column. Do you see how it is different?

 
 

The "Update" link in the form so far does nothing at all. It gives a "Specified method is not supported." error. The code behind for the web form looks like this:

using System;
using System.Web.UI;
using DevExpress.Web.ASPxGridView;
using DummyDevExpressApplication.Utilities;
namespace DummyDevExpressApplication
{
   public partial class _Default : Page
   {
      protected void Page_Load(object sender, EventArgs e)
      {
         SolarSystem.DataSource = PlanetFactory.GetPlanets();
         SolarSystem.SettingsEditing.Mode = GridViewEditingMode.PopupEditForm;
         SolarSystem.DataBind();
      }
   }
}

 
 

As you may have noticed, I am using a list of planets. I have Planet object that looks like this:

using System;
namespace DummyDevExpressApplication.Models
{
   public class Planet
   {
      public string Name { get; set; }
      public decimal ClosestAstronomicalUnitDistanceFromSun { get; set; }
      public PlanetType PlanetType { get; set; }
      public int MilesInDiameter { get; set; }
      public DateTime? DiscoveryDate { get; set; }
   }
}

 
 

PlanetType is an enum that populates the options in the dropdown list at my dx:ASPxGridView shaped like so:

namespace DummyDevExpressApplication.Models
{
   public enum PlanetType
   {
      Inner,
      Gas,
      Dwarf
   }
}

 
 

How does the enum-to-dropdown magic work? Notice the reference to DummyDevExpressApplication.Utilities.CommonSource at markup at the top of this posting. That loops in this:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using DummyDevExpressApplication.Models;
namespace DummyDevExpressApplication.Utilities
{
   public class CommonSource
   {
      [DataObjectMethod(DataObjectMethodType.Select, true)]
      public static List<KeyValuePair<int, string>> SelectPlanetTypes()
      {
         return Enum.GetValues(typeof(PlanetType)).Cast<PlanetType>()
               .Select(pt => new KeyValuePair<int, string>(((int)pt), pt.ToString())).ToList();
      }
   }
}

 
 

That's all I have so far! The following static class has little to do with DevExpress, but I need it to hydrate my SolarSystem control.

using System;
using System.Collections.Generic;
using DummyDevExpressApplication.Models;
namespace DummyDevExpressApplication.Utilities
{
   public static class PlanetFactory
   {
      public static List<Planet> GetPlanets()
      {
         return new List<Planet>()
         {
            new Planet()
            {
               Name = "Mercury",
               ClosestAstronomicalUnitDistanceFromSun = 0.307m,
               PlanetType = PlanetType.Inner,
               MilesInDiameter = 3032
            },
            new Planet()
            {
               Name = "Venus",
               ClosestAstronomicalUnitDistanceFromSun = 0.718m,
               PlanetType = PlanetType.Inner,
               MilesInDiameter = 7521
            },
            new Planet()
            {
               Name = "Earth",
               ClosestAstronomicalUnitDistanceFromSun = 0.98m,
               PlanetType = PlanetType.Inner,
               MilesInDiameter = 7926
            },
            new Planet()
            {
               Name = "Mars",
               ClosestAstronomicalUnitDistanceFromSun = 1.38m,
               PlanetType = PlanetType.Inner,
               MilesInDiameter = 4222
            },
            new Planet()
            {
               Name = "Jupiter",
               ClosestAstronomicalUnitDistanceFromSun = 4.95m,
               PlanetType = PlanetType.Gas,
               MilesInDiameter = 88846
            },
            new Planet()
            {
               Name = "Saturn",
               ClosestAstronomicalUnitDistanceFromSun = 9.05m,
               PlanetType = PlanetType.Gas,
               MilesInDiameter = 74898
            },
            new Planet()
            {
               Name = "Uranus",
               ClosestAstronomicalUnitDistanceFromSun = 18.4m,
               PlanetType = PlanetType.Gas,
               MilesInDiameter = 31763,
               DiscoveryDate = new DateTime(1781,3,13)
            },
            new Planet()
            {
               Name = "Neptune",
               ClosestAstronomicalUnitDistanceFromSun = 29.8m,
               PlanetType = PlanetType.Gas,
               MilesInDiameter = 30778,
               DiscoveryDate = new DateTime(1846,9,23)
            },
            new Planet()
            {
               Name = "Pluto",
               ClosestAstronomicalUnitDistanceFromSun = 29.7m,
               PlanetType = PlanetType.Dwarf,
               MilesInDiameter = 1430,
               DiscoveryDate = new DateTime(1930,2,18)
            }
         };
      }
   }
}