ASPx Group

ASPx Group Property Editor allows to divide Detail View on groups of properties. At the time when the user edits one of the groups, the remaining groups are displayed in the "View” mode, which significantly accelerates Web application.

To fully demonstrate the features, it is required to consider business class with a significant number of properties. The code snippet below implements GroupPropertyEditorObject Domain Component.

  • c#
  • VB

[Hint(Hints.GroupPropertyEditor, ViewType.DetailView)]
public interface GroupPropertyEditorObject
  string Name { get; set; }
  string StringProperty1 { get; set; }
  string StringProperty2 { get; set; }
  string StringProperty3 { get; set; }
  string StringProperty4 { get; set; }
  string StringProperty5 { get; set; }
  string StringProperty6 { get; set; }
  string StringProperty7 { get; set; }
  string StringProperty8 { get; set; }
  string StringProperty9 { get; set; }
  string StringProperty10 { get; set; }
  int IntProperty1 { get; set; }
  int IntProperty2 { get; set; }
  int IntProperty3 { get; set; }
  int IntProperty4 { get; set; }
  int IntProperty5 { get; set; }
  int IntProperty6 { get; set; }
  int IntProperty7 { get; set; }
  int IntProperty8 { get; set; }
  int IntProperty9 { get; set; }
  int IntProperty10 { get; set; }
  DateTime DateTimeProperty1 { get; set; }
  DateTime DateTimeProperty2 { get; set; }
  DateTime DateTimeProperty3 { get; set; }
  DateTime DateTimeProperty4 { get; set; }
  DateTime DateTimeProperty5 { get; set; }
  DateTime DateTimeProperty6 { get; set; }
  DateTime DateTimeProperty7 { get; set; }
  DateTime DateTimeProperty8 { get; set; }
  DateTime DateTimeProperty9 { get; set; }
  DateTime DateTimeProperty10 { get; set; }
  IList<GroupPropertyEditorListObject> ListProperty1 { get; }
  IList<GroupPropertyEditorListObject> ListProperty2 { get; }
  IList<GroupPropertyEditorListObject> ListProperty3 { get; }
  IList<GroupPropertyEditorListObject> ListProperty4 { get; }
  IList<GroupPropertyEditorListObject> ListProperty5 { get; }
  IList<GroupPropertyEditorListObject> ListProperty6 { get; }
  IList<GroupPropertyEditorListObject> ListProperty7 { get; }
  IList<GroupPropertyEditorListObject> ListProperty8 { get; }
  IList<GroupPropertyEditorListObject> ListProperty9 { get; }
  IList<GroupPropertyEditorListObject> ListProperty10 { get; }
  GroupPropertyEditorListObject ObjectProperty1 { get; set; }
  GroupPropertyEditorListObject ObjectProperty2 { get; set; }
  GroupPropertyEditorListObject ObjectProperty3 { get; set; }
  GroupPropertyEditorListObject ObjectProperty4 { get; set; }
  GroupPropertyEditorListObject ObjectProperty5 { get; set; }
  GroupPropertyEditorListObject ObjectProperty6 { get; set; }
  GroupPropertyEditorListObject ObjectProperty7 { get; set; }
  GroupPropertyEditorListObject ObjectProperty8 { get; set; }
  GroupPropertyEditorListObject ObjectProperty9 { get; set; }
  GroupPropertyEditorListObject ObjectProperty10 { get; set; }
  GroupPropertyEditorObject ThisObject { get; }
public class GroupPropertyEditorObjectLogic
  public static GroupPropertyEditorObject Get_ThisObject(GroupPropertyEditorObject instance)
    return instance;

<DomainComponent> _
<Hint(Hints.GroupPropertyEditor, ViewType.DetailView)> _
Public Interface GroupPropertyEditorObject
  Property Name As String
  Property StringProperty1 As String
  Property StringProperty2 As String
  Property StringProperty3 As String
  Property StringProperty4 As String
  Property StringProperty5 As String
  Property StringProperty6 As String
  Property StringProperty7 As String
  Property StringProperty8 As String
  Property StringProperty9 As String
  Property StringProperty10 As String
  Property IntProperty1 As Integer
  Property IntProperty2 As Integer
  Property IntProperty3 As Integer
  Property IntProperty4 As Integer
  Property IntProperty5 As Integer
  Property IntProperty6 As Integer
  Property IntProperty7 As Integer
  Property IntProperty8 As Integer
  Property IntProperty9 As Integer
  Property IntProperty10 As Integer
  Property DateTimeProperty1 As DateTime
  Property DateTimeProperty2 As DateTime
  Property DateTimeProperty3 As DateTime
  Property DateTimeProperty4 As DateTime
  Property DateTimeProperty5 As DateTime
  Property DateTimeProperty6 As DateTime
  Property DateTimeProperty7 As DateTime
  Property DateTimeProperty8 As DateTime
  Property DateTimeProperty9 As DateTime
  Property DateTimeProperty10 As DateTime
  <BackReferenceProperty("ObjectProperty1")> _
ReadOnly Property ListProperty1 As IList(Of GroupPropertyEditorListObject)
  <BackReferenceProperty("ObjectProperty2")> _
ReadOnly Property ListProperty2 As IList(Of GroupPropertyEditorListObject)
  <BackReferenceProperty("ObjectProperty3")> _
ReadOnly Property ListProperty3 As IList(Of GroupPropertyEditorListObject)
  <BackReferenceProperty("ObjectProperty4")> _
ReadOnly Property ListProperty4 As IList(Of GroupPropertyEditorListObject)
  <BackReferenceProperty("ObjectProperty5")> _
ReadOnly Property ListProperty5 As IList(Of GroupPropertyEditorListObject)
  <BackReferenceProperty("ObjectProperty6")> _
ReadOnly Property ListProperty6 As IList(Of GroupPropertyEditorListObject)
  <BackReferenceProperty("ObjectProperty7")> _
ReadOnly Property ListProperty7 As IList(Of GroupPropertyEditorListObject)
  <BackReferenceProperty("ObjectProperty8")> _
ReadOnly Property ListProperty8 As IList(Of GroupPropertyEditorListObject)
  <BackReferenceProperty("ObjectProperty9")> _
ReadOnly Property ListProperty9 As IList(Of GroupPropertyEditorListObject)
  <BackReferenceProperty("ObjectProperty10")> _
ReadOnly Property ListProperty10 As IList(Of GroupPropertyEditorListObject)
  Property ObjectProperty1 As GroupPropertyEditorListObject
  Property ObjectProperty2 As GroupPropertyEditorListObject
  Property ObjectProperty3 As GroupPropertyEditorListObject
  Property ObjectProperty4 As GroupPropertyEditorListObject
  Property ObjectProperty5 As GroupPropertyEditorListObject
  Property ObjectProperty6 As GroupPropertyEditorListObject
  Property ObjectProperty7 As GroupPropertyEditorListObject
  Property ObjectProperty8 As GroupPropertyEditorListObject
  Property ObjectProperty9 As GroupPropertyEditorListObject
  Property ObjectProperty10 As GroupPropertyEditorListObject
  ReadOnly Property ThisObject As GroupPropertyEditorObject
End Interface
<DomainLogic(GetType(GroupPropertyEditorObject))> _
Public Class GroupPropertyEditorObjectLogic
  Public Shared Function Get_ThisObject(ByVal instance As GroupPropertyEditorObject) As GroupPropertyEditorObject
    Return instance
  End Function
End Class


ThisObject property returns an object of the VerticalGridPropertyEditorObject type, i.e. this property represents the entire object.

You can view the code used in this lesson in the Xafari.XtraEditors.Module | Editors|GroupPropertyEditorObject.cs file of the Xtra Editors demo installed with Xafari. By default, the Xtra Editors application is installed in %PUBLIC%\Documents\Xafari Framework vXX.X.XXXX Demos\XtraEditors.

We will apply Vertical Grid Property Editor to ThisObject property.

Divide business class properties into the following groups: StringProperty, IntProperty, DateTimeProperty, ObjectProperty, ListProperty. It is necessary to create and configure the appropriate Detail View for each of these groups.

Invoke Model Editor, right-click the Views node and select Add|Detail View from the context menu. Focus the new Detail View and set ModelClass property to the GroupPropertyEditorObject value, set Id property to the GroupPropertyEditorObject_DetailView_Int value. Edit the Items subnode so that it includes only Int properties.

Similarly, add the Detail Views to the other groups. Image below demonstrates required Detail Views.

Next, you should configure the default Detail View by adding Property Editors, which will display conceived group.

Navigate to the Views|...|GroupPropertyEditorObject_DetailView|Items node and remove all nested elements except Name. Add new Property Editor to the Items node and set its properties as follows:

  • PropertyName = ThisObject
  • PropertyEditorType = Xafari.Editors.Web.ASPxGroupPropertyEditor
  • View = GroupPropertyEditorObject_DetailView_Int
  • Id = IntProperty

Similarly, add the Property Editors to the StringProperty, DateTimeProperty, ObjectProperty and ListProperty groups. Image below demonstrates configuration for the default Detail View.

Run the ASP.NET application, select the appropriate item in the navigation control and invoke GroupPropertyEditorObject_DetailView. To see the property, expand corresponding group, to edit the property, click “Edit” near the group.