Skip to main content
BuyLog In
XAF: Cross-Platform .NET App UI & Web API
Search in…
Docs > Getting Started > In-Depth XAF ASP.NET Core Blazor UI Tutorial (Main Demo) > UI Customization > Group List View Data
A newer version of this page is available. .
All docs
V21.1
.NET Framework 4.5.2+
Cross-Platform .NET App UI (XAF)
Getting Started
Basic WinForms & Web Forms Tutorial (Simple Project Manager Demo)
In-Depth XAF WinForms & Web Forms Tutorial (Main Demo)
Basic ASP.NET Core Blazor Tutorial (Simple Project Manager Demo)
In-Depth XAF ASP.NET Core Blazor UI Tutorial (Main Demo)
Business Model Design
Extend Functionality
UI Customization
Place an Action in a Different Location
Specify Action Settings
Format a Business Object Caption
Create a Calculated Property
Filter Lookup Editor Data Source
Format a Property Value
Use a Multiline Editor for String Properties
Add an Item to the Navigation Control
Implement Property Value Validation in the Application Model
Customize the View Items Layout
Localize UI Elements
Add an Editor to a Detail View
Change Field Visibility in a List View
Change Filter List Views
Group List View Data
Additional Modules
Installation, Upgrade, Version History
Application Shell and Base Infrastructure
Storage, ORM, and Business Model Design
Data Manipulation and Business Logic
User Interface and Behavior Customization
Data Filtering
Data Security and Safety
Validation (Prevent Data Errors)
Conditional Appearance (Manage State of UI Elements)
Reporting (Shape, Export & Print Data)
Analytics (Extract Data Insights)
Document Management
Business Process Management
Event Planning
Localization
Debugging, Testing and Error Handling
Deployment
Support, QA & Troubleshooting
API Reference
Download CHM

Group List View Data

  • 2 minutes to read

This topic explains how to group List View data, and uses the Department and Position properties created in previous steps to group the Contact List View data.

Note

Before you proceed, take a moment to review the following lesson:

Step-by-Step Instructions

  1. In the MySolution.Module project, open the Model.DesignedDiffs.xafml file in the Model Editor.

  2. Click the Views | MySolution.Module.BusinessObjects | Contact_ListView | Columns node to open the Grid List Editor Designer. Right-click the table header and select the Show Group By Box item.

    Show Group By Box

  3. The Group Panel is displayed.

    Group Panel

  4. Drag the column’s header to the Group Panel to group data by the corresponding field. You can add multiple columns to the group area to create nested groups. Drag the Department and Position columns to the Group Panel.

    Group Panel with columns

  5. Run the application. The Contact List View is grouped by the Department and Position fields and the Group Panel is displayed.

    The grouped Contact List View

  6. Users also can drag columns to and from the Group Panel to group and ungroup List View Data.

    Users can group List View at runtime

Detailed Explanation

Use Column’s GroupIndex to Group Data

When you add a column to the Group Panel the column’s GroupIndex property changes. You can directly specify the column’s GroupIndex property to group List View data. See the following topic for more information: List View Columns Customization.

Prevent Users from Changing Groups

You can hide the Group Panel to prevent users from changing groups. Navigate to the Views | MySolution.Module.BusinessObjects | Contact_ListView node and set its IsGroupPanelVisible property to False.

Next Lesson

Attach Files to Objects