Syncfusion Blazor Components

Enterprise-grade UI components powering Grade My Investments' interactive experiences

COMPONENT USAGE MAP

rendering diagram…

flowchart TB
    subgraph CW[Client Web - 12 pages]
        CW1[SfGrid<br/>5 pages]:::app
        CW2[SfButton<br/>12 pages]:::app
        CW3[SfTextBox<br/>6 pages]:::app
        CW4[SfTreeView<br/>File Browser]:::app
        CW5[SfSpreadsheet<br/>Excel Preview]:::data
        CW6[SfCard<br/>Dashboard]:::app
    end
    subgraph AW[Admin Web - 8 pages]
        AW1[SfGrid<br/>8 pages]:::svc
        AW2[SfChart<br/>Financials]:::svc
        AW3[SfSpinner<br/>Loading]:::svc
        AW4[SfDateRangePicker<br/>4 pages]:::svc
    end
    SF{{Syncfusion<br/>Blazor Library}}:::ext
    SF --> CW
    SF --> AW
    classDef app fill:#1f2630,stroke:#C0894E,color:#F3EFE8;
    classDef svc fill:#241c14,stroke:#E2B583,color:#F3EFE8;
    classDef data fill:#22201a,stroke:#C0894E,color:#EBD3AE;
    classDef ext fill:#1b1f27,stroke:#5A616B,color:#C4C0B8;
    classDef sec fill:#1d2733,stroke:#5cc8e0,color:#eafaff;

Ten Syncfusion components mapped to their host applications and primary use cases across Client Web and Admin Web.

Why Syncfusion?

Grade My Investments chose Syncfusion Blazor over building custom components or using basic HTML/Bootstrap controls for several strategic reasons. The platform requires rich data grids with sorting, filtering, and pagination; interactive tree views for file management; spreadsheet viewers for Excel report previews; and charting capabilities for financial data visualization. Building these from scratch would have added months of development time and introduced maintenance burden for complex UI logic that Syncfusion handles out of the box.

Development Speed

Enterprise components ready to use instead of building from scratch

Consistent UX

Unified look and feel across all pages with built-in theming

Responsive Design

All components are mobile-responsive out of the box

Accessibility

WCAG-compliant components with keyboard navigation and ARIA support

Component Inventory

SfGrid - Data Grids

The Syncfusion DataGrid is the most heavily used component in Grade My Investments, providing sortable, filterable, and paginated tables across both the Client Web and Admin Web applications.

Page	Application	Data Displayed
Billing & Usage	Client Web, Admin Web	Charges, invoices, payment history with date filtering
Payment Methods	Client Web	Credit cards with default card management
Report Generations	Client Web	Job history with status, dates, and symbol list details
Email Notifications	Client Web	Notification email addresses with active/inactive status
SMS Notifications	Client Web	SMS phone numbers with active/inactive status
Account Validations	Admin Web	Pending accounts with validation actions
Email Queue	Admin Web	Queued, sent, and failed emails with search and date filtering
SMS Queue	Admin Web	Queued, sent, and failed SMS messages with search and date filtering
Activity Log Dashboard	Admin Web	User activity logs with type filtering and date range search
Report Generations	Admin Web	All report jobs across accounts with status tracking
Account Search	Admin Web	Shared search component used across multiple admin pages

SfTreeView - Tree Navigation

The TreeView component powers the file/folder management system in both Client Web and Admin Web. It renders the hierarchical folder structure with expand/collapse, selection, right-click context menus, and custom node templates that display folder and file icons with color coding.

Features Used

Hierarchical data binding with recursive folder/file nodes
Single-node selection with NodeSelected event handling
Custom node templates with icons, badges, and color indicators
Expand/collapse state management

SfSpreadsheet - Excel Viewer

The Spreadsheet component provides in-browser Excel file viewing on the Manage Folders page. When a user clicks to preview an .xlsx file, Grade My Investments downloads the file bytes from Azure Blob Storage and renders them directly in the Syncfusion Spreadsheet component, allowing users to view report outputs without downloading the file to their device.

Features Used

Read-only Excel rendering from byte arrays
Multi-sheet tab navigation
Cell formatting preservation (colors, fonts, borders)
Responsive container within modal dialogs

SfChart - Financial Charts

The Chart component is used in the Admin Web to visualize Grade My Investments' own financial data, including quarterly and yearly revenue trends, charge breakdowns, and platform usage metrics.

Features Used

Bar charts for quarterly/yearly revenue comparison
Data labels and tooltips for precise values
Responsive sizing within dashboard cards

Form Components

SfTextBox

Enhanced text inputs with floating labels, validation integration, and input masking.

Used in: Account Settings, Create Account, Add Payment Method, Email/SMS management, Admin account search

SfDropDownList

Searchable dropdown menus with data binding and template support.

Used in: Country selection, status filters, report generation options, admin queue filters

SfDateRangePicker / SfDatePicker

Date and date range selection with calendar popup and preset ranges.

Used in: Report generation scheduling, Email/SMS queue date filtering, Activity log filtering

SfButton

Styled action buttons with primary, outline, and icon variants, plus built-in disabled state management.

Used in: Every page across both Client Web and Admin Web

SfCard

Structured content cards for dashboards, summaries, and information panels.

Used in: Dashboard, Billing & Usage, Payment Methods, Report Generations

SfDialog / SfPopup

Modal dialogs for confirmations, data entry, and notifications.

Used in: Email/SMS notification management, confirmation dialogs

SfSpinner - Loading States

The Spinner component provides loading indicators during async operations. In the Admin Web's Manage Folders and Account Search pages, the spinner overlays the content area while data is being fetched, giving users clear feedback that an operation is in progress.

Component Usage by Application

Client Web (12 pages)

SfButton 12 pages
SfTextBox 6 pages
SfGrid 5 pages
SfCard 4 pages
SfDropDownList 3 pages
SfTreeView 1 page
SfSpreadsheet 1 page
SfDateRangePicker 1 page

Admin Web (8 pages)

SfGrid 8 pages
SfButton 8 pages
SfDropDownList 6 pages
SfDateRangePicker 4 pages
SfTextBox 4 pages
SfChart 1 page
SfTreeView 1 page
SfSpreadsheet 1 page
SfSpinner 2 pages

Integration Approach

Registration

Syncfusion is registered once in each application's Program.cs with builder.Services.AddSyncfusionBlazor() and licensed via SyncfusionLicenseProvider.RegisterLicense(). A global import in _Imports.razor makes the base namespace available to all pages.

// _Imports.razor
@using Syncfusion.Blazor

// Individual pages import specific namespaces
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Spreadsheet

Design Philosophy

Selective usage: Syncfusion is used where it adds clear value (data grids, tree views, spreadsheets, charts). Simple layouts still use Bootstrap 5.
No vendor lock-in on structure: Pages use standard Blazor patterns (EditForm, @bind) alongside Syncfusion components, making it possible to swap individual components.
Per-page imports: Each page imports only the Syncfusion namespaces it needs, keeping dependency scope clear and bundle size manageable.
Bootstrap 5 coexistence: Syncfusion components are styled with Bootstrap CSS classes (CssClass="btn-primary") to maintain visual consistency with the rest of the UI.

10

Distinct Syncfusion Components

20+

Pages Using Syncfusion

2

Applications (Client Web + Admin Web)

13

Data Grid Instances