DxFluentUI

I’ve always hated configuring the DevExpress grid controls. Take for example the horizontal grid control. As long as you walk the standard path the control is mostly straightforward, but once you implement for example your own master-detail views, you have to attach some events and then write a lot of boilerplate-code. And this is the part I hate. And even with standard usage the databinding of the objects properties to the columns of the grid is done using strings, which means that renaming properties of your classes while refactoring could possibly break your grid.

After reading some articles on the Fluent API style of programming I thought that would be prefect for configuring the horizontal grid control. In the mean while I also wanted to get away with providing property names for data binding, and instead wanted to be able use some kind of refenence to the real property of the class.

The syntax is somewhat based on the NHibernate Fluent API for configuring the mapping definition of NHibernate to domain classes. Some purists will probably argue that the syntax is not a real Fluent API while others will argue that the chaining of

Creating a simple Horizontal Grid

If you have a data class SomeData, then you can define a horizontal grid for it like this:

Horizontal grid definition

public class SimpleHorizontalGrid : HorizontalGridControlBase
{
  public SimpleHorizontalGrid()
    {
      View<SomeData>("View1",
        v1 =>
        {
          v1.AddColumn("Column1").BindToProperty(d => d.StringValue)
            .And().WithSorting().Allowed();
          v1.AddColumn("Column2").BindToProperty(d => d.IntValue)
            .And().WithEditing().NotAllowed()
            .And().WithSorting().NotAllowed();
        }
    }
}

Above definition will produce following result:

Creating a Master-Detail Grid

public class HorizontalMasterDetail : HorizontalGridControlBase
{
  public HorizontalMasterDetail()
    {
      View("View1",
        v1 =>
        {
          v1.AddColumn("Column1").BindToProperty(d => d.StringValue).And().WithSorting().Allowed();
          v1.AddColumn("Column2").BindToProperty(d => d.IntValue).And().WithEditing().NotAllowed().And().WithSorting().NotAllowed();
          v1.AddDetailView("DetailView1",
            dv1 =>
            {
              dv1.BindToCollection(d => d.SubdataList);
              dv1.AddColumn("Column11");
              dv1.AddColumn("Column12").BindToProperty(d => d.Submember).And().WithFiltering().Allowed();
            });
          v1.AddDetailView("DetailView2",
            dv2 =>
            {
              dv2.BindToCollection(d => d.ComplexSubdataList);
              dv2.AddColumn("Column21").BindToProperty(d => d.StringValue).And().WithFiltering().Allowed();
              dv2.AddColumn("Column22").BindToProperty(d => d.DhcProperty.ThcProperty.StringProperty).And().WithFiltering().NotAllowed();
              dv2.AddDetailView("DetailView21",
                dv21 =>
                {
                  dv21.BindToCollection(d => d.DhcList);
                  dv21.AddColumn("Column211", d => d.ThcProperty.StringProperty);
                });
            });
        });
    }
}

Above definiton will produce following result:

Creating a simple grid with object editing using a dropdown grid

public class HorizontalGridFullFeatured : HorizontalGridControlBase
{
  public HorizontalGridFullFeatured()
    {
      View("View1",
        v1 =>
        {
          v1.AddColumn("Column1").BindToProperty(d => d.IntValue).And().WithEditing().AllowedUsing()
            .Values(new int[] { 1, 1, 2, 3, 5, 8 });
          v1.AddColumn("Column2").BindToProperty(d => d.StringValue).And().WithEditing().AllowedUsing()
            .Objects(new SomeSubdata[]{
              new SomeSubdata(){ Submember = "S1", Textmember = "TEXT1", Prop1 = "P11", Prop2 = "P12" },
              new SomeSubdata(){ Submember = "S2", Textmember = "TEXT2", Prop1 = "P21", Prop2 = "P22" },
              new SomeSubdata(){ Submember = "S3", Textmember = "TEXT3", Prop1 = "P31", Prop2 = "P32" }
            })
            .InDropdownGridEditor(
              de =>
              {
                de.DisplayProperty(d => d.Textmember);
                de.AssignValue().FromProperty(d => d.Submember);
                de.AddColumn("Cap1", d => d.Prop1);
                de.AddColumn("Cap2", d => d.Prop2);
              });
          v1.AddColumn("Column3").BindToProperty(d => d.Subdata).And().WithEditing().AllowedUsing()
            .Objects(new SomeSubdata[]{
              new SomeSubdata(){ Submember = "S1", Textmember = "TEXT1" },
              new SomeSubdata(){ Submember = "S2", Textmember = "TEXT2" },
              new SomeSubdata(){ Submember = "S3", Textmember = "TEXT3" }
            })
            .InDropdownBoxEditor(
              de =>
              {
                de.DisplayProperty(d => d.Submember);
                de.AssignValue().FromObject();
              });
          v1.AddColumn("Column6").BindToProperty(d => d.Subdata.Submember);
        });
    }
}

Above definiton will produce following result:

Downloads

I’ve published all sources on Codeplex

Leave a Reply

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