PageControl Enterprise Multi-Tab Workspace & Navigation Graph

Workspace

The PageControl component provides a structured enterprise workspace container for complex line-of-business forms. It manages multi-tab navigation graphs, tab keyboard shortcuts (Ctrl+Tab, Alt+Letter), form field focus order, and embedded sub-grids.

This benchmark demonstrates a full vendor management master-detail workspace: Vendor Profile (form inputs using TextBoxControl and DropDownListControl), Contacts (embedded sub-grid), and Insurance Compliance.

Live Demo

Vendor Navigation: VND-001 — Dallas Concrete Contractors #1 Record 1 of 200

Vendor ID

Company Legal Name

Street Address

City

State / Province

Postal Code

Telephone

@using Fx.ControlKit
@using Fx.ControlKit.Grid

<!-- PageControl manages multi-tab line-of-business workflows -->
<PageControl NavigationGraph="@NavigationGraph">
    <div class="workspace-tabs">
        <!-- Tab 1: Profile Form -->
        <TextBoxControl Value="@Vendor.Vendor_ID" Enabled="false" />
        <TextBoxControl Value="@Vendor.Vendor_Name" ValueChanged="OnNameChanged" />

        <!-- Tab 2: Embedded Sub-Grid -->
        <GridControl TValue="VendorContactRecord" DataSource="@Contacts">
            <GridColumnsBase>
                <GridColumn Field="@nameof(VendorContactRecord.DisplayName)" HeaderText="Contact" />
                <GridColumn Field="@nameof(VendorContactRecord.WorkPhone)" HeaderText="Phone" />
            </GridColumnsBase>
        </GridControl>
    </div>
</PageControl>

Feature Overview & Architecture Notes

PageControl Component Patterns

Form Keyboard Acceleration: Operators can navigate between inputs and tabs using standard keyboard accelerators without mouse interaction.
Embedded Sub-Grids: PageControl isolates grid scroll boundaries so that scrolling nested contact or PO tables does not disrupt outer page scroll.