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.
  • c#
  • VB

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

Public Class Employee
  Inherits ClassifierItemBase
  Implements ITreeNode, ITreeNodeImageProvider, IStatusSupport
  <VisibleInDetailView(False), VisibleInListView(False), VisibleInLookupListView(False)> _
Public ReadOnly Property ThisObject As Employee
      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.



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:


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