General Components Extra Property Editors Vertical Grid Getting Started

VerticalGridPropertyEditor. Getting Started

VerticalGridPropertyEditor is used for the Employee objects in the Xafari Northwind demo installed with Xafari. The Employee_Properties DetailView was created using this Property Editor. Let's look at the steps, which have been executed for applying this Property Editor.

Declare a property, which refer to the same business object. The code snippet below demonstrates such property in Employee class.

public class Employee : ClassifierItemBase, ITreeNode, ITreeNodeImageProvider, IStatusSupport
{
  //...
  [VisibleInDetailView(false), VisibleInListView(false), VisibleInLookupListView(false)]
  public Employee ThisObject
  {
    get
    {
      return this;
    }
  }
  //...
}

Public Class Employee
  Inherits ClassifierItemBase
  Implements ITreeNode, ITreeNodeImageProvider, IStatusSupport
  '...
  <VisibleInDetailView(False), VisibleInListView(False), VisibleInLookupListView(False)> _
Public ReadOnly Property ThisObject As Employee
    Get
      Return Me
    End Get
  End Property
  '...
End Class

ThisObject is a auxiliary property, and most likely it is not required to display it in View. Therefore, decorate it with VisibleIn*View attributes.

Add module XafariEditorsModule to Module Project.
Add module XafariEditorsWinModule to Windows Forms Application Project.
Add module XafariEditorsWebModule to Web Application Project.
Invoke the Model Editor. Navigate to Views node. Add Employee_Properties Detail View for Employee class. Add ThisObject item to Items node, as shown in the image below.

vertical_grid_property_editor_3

Note:

It is important to create a new Detail View in Application Model and not to clone an existing.

Set PropertyEditorType property to Xafari.Editors.Win.VerticalGridPropertyEditor for the Windows Forms application.
Set PropertyEditorType property to Xafari.Editors.Web.WebVerticalGridPropertyEditor for ASP.NET application.
Assign the Employee_Properties Detail View to the Employee class. For example, you can set it as the MasterDetailView for the ListViewAndDetailView mode, as shown in the image below:

vertical_grid_property_editor_4

To see the result of the described above operations activate Employee_ListView in the Xafari Northwind demo.