DEV Community: Lucy Muturi

ASP.NET Core Scheduler Features Every Developer Should Know

Lucy Muturi — Mon, 27 Jul 2026 11:48:27 +0000

TL;DR: Skip building scheduler logic from scratch. Syncfusion’s ASP.NET Core Scheduler delivers production-ready appointment management with recurring events, multi-timezone support, CRUD operations, flexible views, and multiple resources. All configured in hours, not weeks.

Building a scheduling application sounds straightforward until you start dealing with recurring meetings, timezone differences, resource allocation, and appointment management. What begins as a simple calendar requirement can quickly become a complex project with countless edge cases.

Instead of building scheduling functionality from scratch, you can leverage the Syncfusion ASP.NET Core Scheduler to handle these challenges out of the box. From managing recurring appointments to coordinating resources across teams, it provides the essential capabilities needed for modern scheduling applications.

In this article, we’ll explore five core Scheduler features that help developers build robust scheduling solutions faster:

Appointments
CRUD operations
Timezone support
Flexible views
Multiple resources

1. Appointments: The foundation of every scheduling application

Appointments are at the heart of any scheduling system. Whether you’re building a meeting planner, appointment booking platform, or resource management solution, the ability to create and organize events efficiently is essential.

Support for different event types

Not every event behaves the same way. Some occupy a specific time slot, while others span an entire day or repeat on a regular schedule.

The Scheduler supports:

Standard appointments for time-bound activities
All-day events for holidays, conferences, or milestones
Recurring events for meetings that occur on a predictable schedule
Multi-day events that span several dates

For example, instead of creating a weekly team meeting dozens of times, you can define a recurrence rule once and let the Scheduler generate future occurrences automatically.

var appointment = new AppointmentData
{
    Subject = "Weekly Standup",
    StartTime = new DateTime(2024, 1, 15, 10, 0, 0),
    EndTime = new DateTime(2024, 1, 15, 10, 30, 0),
    RecurrenceRule = "FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR;COUNT=52"
};

The RecurrenceRule property follows iCalendar (RFC 5545) specification. You can set occurrences to end after N times (COUNT=52), on a specific date (UNTIL=20241231), or never end.

Spanned Events (duration > 24 hours) display in the all-day row by default. Configure SpannedEventPlacement to render them inside time slots instead, which is useful for multi-day projects visible in the working area.

Custom fields and validation

Enforce data integrity by adding validation rules to each field. You can define validation rules directly in the Razor template using the validationRules attribute.

You can also define reusable validation rule objects in your controller and reference them across multiple fields:

var validationRules = new Dictionary<string, object> { { "required", true } };
var locationRules = new Dictionary<string, object> 
{ 
    { "required", true }, 
    { "regex", new string[] { "^[a-zA-Z0-9-]*$", "Special characters not allowed" } } 
};

This approach allows you to centralize validation logic and reuse the same rules across multiple scheduler instances when needed.

Prevention features

Prevent overlapping events by setting allowOverlap="false". The scheduler blocks conflicting event creation with an alert. This is critical for resource-constrained scenarios (meeting rooms, equipment).

Block specific time ranges (unavailable slots, maintenance windows) using events with isBlock="true". These appear visually distinct and prevent new appointments during those times.

2. CRUD operations: Managing the complete appointment lifecycle

A scheduling application is only useful if users can create, update, and remove appointments effortlessly.

Our Scheduler includes built-in support for the entire appointment lifecycle.

Creating events

Users can create appointments directly within the interface by selecting a date or time slot and entering event details such as:

Subject
Location
Start time
End time
Recurrence settings

Developers can also create appointments programmatically when business workflows require automated scheduling.

JavaScript

var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var updatedEvent = {
    Id: 5,
    Subject: 'Updated Team Meeting',
    StartTime: new Date(2026, 6, 20, 15, 0, 0),
    EndTime: new Date(2026, 6, 20, 15, 30, 0)
};

scheduleObj.addEvent(updatedEvent);

Server-side insert logic

When appointments are created, the scheduler sends an insert action request. Your backend processes this:

if (param.action == "insert")
{
    var value = param.value;
    DateTime startTime = Convert.ToDateTime(value.StartTime);
    DateTime endTime = Convert.ToDateTime(value.EndTime);

    var appointment = new ScheduleEventData()
    {
        Id = db.ScheduleEventDatas.Max(p => p.Id) + 1,
        Subject = value.Subject,
        StartTime = startTime,
        EndTime = endTime,
        IsAllDay = value.IsAllDay,
        RecurrenceRule = value.RecurrenceRule
    };

    db.ScheduleEventDatas.InsertOnSubmit(appointment);
    db.SubmitChanges();
}

Editing Appointments

Schedules change constantly. Meetings get rescheduled, durations are adjusted, and locations change.

The Scheduler makes it easy to edit existing appointments while preserving important metadata. You can edit appointments in 3 ways.

Normal events: Double-click to edit, then save changes.
Recurring events: Events can be modified either as a single occurrence or as part of the entire series.
Method: You can edit appointments programmatically using the saveEvent method.

JavaScript

var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var updatedEvent = {
    Id: 5,
    Subject: 'Updated Team Meeting',
    StartTime: new Date(2026, 6, 20, 16, 0, 0),
    EndTime: new Date(2026, 6, 20, 16, 30, 0)
};
scheduleObj.saveEvent(updatedEvent);

Deleting Appointments

Appointments can be removed individually or deleted as part of a recurring series. This flexibility helps maintain accurate schedules while reducing the complexity of managing event history.

By handling these operations automatically, developers can spend less time building infrastructure and more time delivering business value.

For more information, see how CRUD operations in the Scheduler support full appointment lifecycle management through multiple approaches.

3. Timezone support: Scheduling across location boundaries

Timezone and localization support ensures accurate scheduling across regions. Syncfusion manages the time zone conversions automatically.

Scheduler-level timezones

Organizations that operate from a central office often need all events displayed according to a single timezone.

The Scheduler allows you to define a default timezone so every user sees appointments consistently, regardless of their local device settings.

CSHTML

<ejs-schedule id="schedule" timezone="America/New_York" selectedDate="new DateTime(2024, 1, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>

Now, every user sees appointments in Eastern Time, regardless of their local timezone. Useful for centralized operations like trading, broadcasts, or corporate headquarters scheduling.

Event-level timezone

Some applications require appointments to be tied to different geographic locations.

For example:

A meeting in New York
A training session in London
A conference in Singapore

Each event can maintain its own timezone while the Scheduler automatically converts and displays the correct local time for every user.

CSHTML

<e-schedule-eventsettings dataSource="@ViewBag.appointments">
    <e-eventsettings-fields id="Id">
        <e-field-starttime name="StartTime"></e-field-starttime>
        <e-field-starttimezone name="StartTimeZone"></e-field-starttimezone>
        <e-field-endtimezone name="EndTimeZone"></e-field-endtimezone>
    </e-eventsettings-fields>
</e-schedule-eventsettings>

An appointment at 9:00 AM in “America/Los_Angeles” displays as 12:00 PM for a “America/New_York” user (3-hour difference). The scheduler handles all conversion math automatically.

UTC-based scheduling

For global systems, storing and displaying events using UTC provides an additional layer of consistency and helps eliminate timezone-related errors.

This approach is particularly useful for enterprise applications serving distributed teams.

In your Startup.cs, ensure JSON serialization uses UTC:

Startup.cs

.AddJsonOptions(opt => opt.SerializerSettings.DateTimeZoneHandling = 
    DateTimeZoneHandling.Utc)

This ensures server and client agree on time representation, preventing off-by-hour surprises.

Localization: Supporting multiple languages and cultures

The Scheduler integrates localization (globalization and language translation) to function globally. You can adapt the Scheduler to various languages and regions using the locale property.

CSHTML

<ejs-schedule id="schedule" width="100%" height="550px" locale="fr-CH">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>

Customize date format

By default, Scheduler follows "MM/dd/yyyy" format based on the locale. Customize using the dateFormat property:

CSHTML

<ejs-schedule id="schedule" width="100%" height="550px" dateFormat="yyyy/MM/dd">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>

Set time format

Control 12-hour or 24-hour format using timeFormat:

CSHTML

<ejs-schedule id="schedule" width="100%" height="550px" timeFormat="HH:mm">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>

Enable Right-to-Left (RTL) mode

For languages like Arabic or Hebrew, set enableRtl="true" to display the Scheduler layout from right to left:

CSHTML

<ejs-schedule id="schedule" width="100%" height="550px" enableRtl="true">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>

Localize static text

Translate UI text (buttons, labels, messages) using the L10n class:

JavaScript

var L10n = ej.base.L10n;
L10n.load({
    "hu": {
        "schedule": {
            "day": "Nap",
            "week": "Hét",
            "month": "Hónap",
            "today": "Ma",
            "noEvents": "Nincs esemény"
        }
    }
});

Localization enables teams across regions to work seamlessly in their preferred languages and timezone representations.

Read the full blog post on the Syncfusion Website

Still Exporting CSV Files? Embed a Spreadsheet Editor in Your Web App Instead

Lucy Muturi — Fri, 24 Jul 2026 11:28:18 +0000

TL;DR: CSV exports slow down modern web apps with version issues, stale data, and broken validation. In-browser spreadsheets offer a more efficient approach by enabling structured, real-time editing directly inside applications, improving data consistency, user experience, and workflow efficiency across dashboards, operations, and internal tools.

If your app still relies on “Export to CSV” for quick edits, you’ve probably seen this happen:

Someone downloads a file, opens it in Excel or Google Sheets, makes a few updates… and then things start getting messy.

Which version is the latest?
Why did the upload fail?
Who changed this value?

At first, it feels like a simple workflow. But once teams depend on it daily, the cracks start to show.

A modern alternative is an in-browser spreadsheet: an Excel-like editor embedded directly in your web app. Users edit data in place with familiar spreadsheet interactions without leaving the product.

In this article, we’ll look at how to embed an in-browser spreadsheet in React using Syncfusion^® React Spreadsheet Editor.

The hidden problem with CSV exports

CSV exports weren’t designed for continuous, in-app data editing. They were a workaround useful at a time when web apps couldn’t handle complex grids.

Today, that workaround creates more problems than it solves.

Here’s what typically goes wrong:

Version confusion: Multiple files floating around, no clear “source of truth”.
Stale data: The moment a file is exported, it starts drifting away from live data.
Broken structure: No formulas, no formatting, no validation, just raw values.
Extra engineering overhead: Imports fail, formats mismatch, edge cases pile up.

Individually, these are small issues. Together, they slow teams down and introduce unnecessary risk.

When the export breaks, productivity follows

What looks like a simple loop export, edit, and upload quietly adds friction at every step.

Now imagine a finance team updating quarterly forecasts.

They export a CSV, tweak some numbers, and re-upload it. But formulas are gone, number formats are inconsistent, and validation rules don’t exist anymore.

Someone spots an error. Another file is downloaded. Another version is created.

By the time data is “final,” nobody fully trusts it.

This isn’t a tooling issue; it’s a workflow problem.

So what’s changing?

Instead of pushing users out to Excel, many modern web apps are doing the opposite:

They’re bringing spreadsheet-like editing directly into the application.

This means:

Edit data in place
Keep everything connected to live data
Apply validation before errors happen
Maintain a single source of truth

No exports. No uploads. No guesswork.

CSV exports vs. in-browser Spreadsheets: What actually changes

Here’s the real difference, not in features, but in experience:

CSV Workflow	In-Browser Spreadsheet
Download → Edit → Upload	Edit instantly inside the app.
Static snapshot of data	Always working with live data.
No built-in validation	Controlled, rule-based editing
Multiple file versions	One shared source of truth.
Error-prone updates	Guided, structured changes

The shift isn’t just technical; it’s about removing unnecessary steps.

When CSV still makes sense

CSV exports still have their place.

They’re useful when:

Data needs to be shared externally
Offline access is required
The task involves one-time exports

The problem arises when CSV becomes the default for everyday editing.

What makes an in-browser Spreadsheet enterprise-ready?

Embedding a spreadsheet into a production application requires more than just rendering a grid.

Key considerations include:

Performance: Large datasets need efficient rendering (virtualization) and a careful recalculation strategy.
Scalability: Define how edits sync to your backend (save-on-change vs save-on-submit, conflict handling).
Maintainability: Prefer a component with stable APIs and documented configuration patterns.
Security/permissions: Restrict editing by role, protecting sheets/ranges, and validating inputs at the cell level.
Accessibility: Keyboard navigation and screen reader support matter for enterprise rollouts.

The modern approach: In-browser Spreadsheet Editor

An embedded spreadsheet component brings spreadsheet-style editing directly into your web app, without forcing users to switch tools.

Instead of exporting files and re-importing them later, users can work with data in a structured, interactive grid that stays connected to your application.

This approach allows your app to stay in control of:

Data access and permissions
Validation and business rules
Real-time updates and consistency

Today, many teams use ready-made spreadsheet components to support this pattern, rather than building everything from scratch.

For example, in a React application, a component like the Syncfusion React Spreadsheet Editor can provide the core functionality needed to support in-app editing, including handling large datasets, applying validation, and maintaining a consistent data structure.

Advanced data management features in React Spreadsheet

Read the full blog post on the Syncfusion Website

Best JavaScript Data Grid Libraries: Which One Is Right for Your App?

Lucy Muturi — Fri, 24 Jul 2026 06:02:37 +0000

TL;DR: Choosing a JavaScript data grid library can be challenging, especially when modern applications require features such as editing, filtering, export, accessibility, and high-performance data handling. This comparison reviews AG Grid, TanStack Table, Syncfusion JavaScript DataGrid, Handsontable, and Kendo UI Grid to help developers identify the best fit for their application requirements.

At first glance, displaying data in a web application seems simple. Render a table, load some rows, and you’re done.

But that simplicity rarely survives contact with real-world requirements.

Users eventually ask for filtering, inline editing, exports, grouped views, responsive layouts, role-based access, keyboard navigation, localization, and the ability to handle millions of records through virtualization, paging, incremental loading, and server-side data operations.

That’s why choosing a JavaScript data grid isn’t just a UI decision. The right grid can accelerate development and improve user productivity. The wrong one can create performance issues, increase maintenance costs, and slow down future product development.

In this guide, we’ll compare five popular JavaScript data grid libraries in 2026:

AG Grid
TanStack Table
Syncfusion JavaScript DataGrid
Handsontable
Kendo UI Grid

Rather than looking for a universal winner, we’ll focus on which grid works best for specific application requirements.

Feature	AG Grid	TanStack	Syncfusion	Handsontable	Kendo
Virtualization	Yes	API-driven	Yes	Yes	Yes
Excel Export	Yes	Custom	Yes	Yes	Yes
PDF Export	Yes	Custom	Yes	Limited	Yes
Built-in Editing	Yes	Custom	Yes	Yes	Yes
Headless	No	Yes	No	No	No

How we evaluated these JavaScript Data Grids

This comparison is based on publicly available product documentation and capabilities reviewed in July 2026. We evaluated each library based on its data-handling model, built-in features, customization options, developer experience, accessibility support, licensing approach, ecosystem maturity, and suitability for common application scenarios.

The order does not represent a universal ranking. Each grid has different strengths, and the best choice depends on your application’s workflows, technical requirements, framework, budget, and long-term maintenance needs. Product capabilities and licensing terms can change, so verify the latest vendor documentation before making a final decision.

Feature availability, APIs, licensing, and accessibility details may also differ across framework-specific editions. Verify the documentation for the exact package and edition your application uses.

Why choosing the right JavaScript Data Grid matters

In many business applications, the data grid becomes the primary workspace for users. Instead of simply viewing data, users filter records, edit values, export reports, review exceptions, and complete day-to-day operational tasks directly within the grid.

This is common in applications such as:

Admin dashboards
ERP and CRM systems
Inventory management software
Financial reporting tools
Analytics platforms
Data review and approval workflows
Internal operations portals
B2B SaaS applications

The challenge is that not all JavaScript data grid libraries are designed for the same purpose.

Some provide a fully featured component with built-in capabilities such as editing, filtering, grouping, and export. Others focus on table logic and give developers complete control over the user interface. There are also solutions designed specifically for spreadsheet-style workflows and data-entry scenarios.

Because the grid often becomes one of the most frequently used parts of an application, choosing the right solution can affect development effort, performance, maintainability, and overall user experience. Before comparing individual libraries, it’s worth understanding the different approaches available and how they align with your application’s requirements.

Three approaches to JavaScript Data Grids

Before comparing products, it’s useful to understand the three major categories of grid solutions.

Component-based grids

Component-based grids ship with built-in UI, interaction models, styling systems, and common data operations.

They’re typically chosen by teams that want enterprise-grade functionality without having to build every interaction from scratch.

Common examples:

AG Grid
Syncfusion DataGrid
Kendo UI Grid

These solutions work particularly well for business applications, reporting portals, ERP systems, CRM platforms, and operational dashboards.

Headless grid libraries

Headless libraries focus on data-processing logic rather than visual presentation.
Instead of providing a complete UI, they offer APIs and state management that let you build your own experience.
TanStack Table is a widely used example of this approach.
This model works well for organizations with established design systems and teams that require complete UI control.
In return for that control, the development team is responsible for implementing or integrating the rendered UI, styling, semantic markup, accessibility, focus management, and keyboard interaction behavior required by the application.

Spreadsheet-oriented grids

Some applications revolve around data entry rather than data presentation.

Spreadsheet-style grids provide cell editing, keyboard workflows, copy-paste support, validation, and interactions that mimic spreadsheet software.

Handsontable is a popular candidate in this category.

How to evaluate a JavaScript data grid library

When comparing grid libraries, feature count alone is rarely the deciding factor for long-term success. Most mature products already support filtering, sorting, paging, and editing.

The more important question is whether the available features match your workflows, performance requirements, customization needs, and maintenance capacity.

Instead, focus on these questions:

Performance

How will the grid behave with realistic datasets?

Consider:

Large record counts
Frequent updates
Virtual scrolling
Server-side data operations

Editing requirements

Do users need:

Inline editing?
Batch updates?
Validation rules?
Custom editors?

Customization

How closely must the grid match your design system?

Some products provide extensive customization, while others prioritize ready-made functionality.

Accessibility

For many enterprise applications, accessibility is a requirement rather than an option. Verify the grid against your organization’s required WCAG 2.1 or WCAG 2.2 conformance level, and test the configured implementation rather than relying only on a vendor-level accessibility statement.

Evaluate:

Keyboard-only navigation and operation
Logical and visible focus management
Screen-reader behavior
Accessible editing, validation, and error reporting
Roles, names, states, and relationships
Alternatives for drag-based interactions
Behavior after customization and theming

Export and reporting

Many business workflows still depend on:

Excel export
CSV export
PDF export

If reporting is critical, ensure these capabilities meet your requirements.

Licensing and support

Before committing, verify:

Commercial licensing terms
Production restrictions
Support availability
Upgrade policies

JavaScript Data Grid libraries at a glance

Library	Best For	Primary Strength
AG Grid	Data-intensive enterprise applications	Extensive feature set and scalability
TanStack Table	Design-system-driven products	Complete UI flexibility
Syncfusion DataGrid	Business applications and dashboards	Broad enterprise functionality out of the box
Handsontable	Spreadsheet-style workflows	Familiar editing experience
Kendo UI Grid	Existing Telerik ecosystems	Integration with a larger UI platform

Detailed review of the top JavaScript Data Grid libraries

1. AG Grid

AG Grid is widely adopted in enterprise web applications and is frequently evaluated for data-intensive use cases. Its extensive feature set, multiple row models, and support for popular JavaScript frameworks make it a strong candidate for applications with complex data requirements.

One of AG Grid’s biggest strengths is its ability to handle complex requirements without relying heavily on additional libraries. Features such as filtering, grouping, aggregation, pivoting, virtualization, and advanced data operations make it a strong candidate for large-scale business applications.

Key strengths

Extensive feature set for enterprise scenarios
Multiple row models for client-side and server-side data scenarios
Mature ecosystem and documentation
Community and Enterprise editions to suit different project needs
Works across multiple JavaScript frameworks

Things to consider

AG Grid’s breadth of functionality can be more than smaller projects require. Teams should also carefully review feature availability between the Community and Enterprise editions before making a long-term commitment.

Ideal use cases

AG Grid is particularly well suited for reporting systems, operational dashboards, financial applications, analytics platforms, and enterprise software where users spend significant time working with data.

2. TanStack Table

Unlike traditional grid components, TanStack Table takes a headless approach. Instead of providing a ready-made user interface, it focuses on the underlying table logic and state management while giving developers complete control over rendering and styling.

This flexibility makes it suitable for teams that maintain their own design systems or need highly customized user experiences. Rather than adapting a prebuilt grid to match an application’s design, developers can build exactly the experience they need.

Key strengths

Complete control over UI and styling
Headless architecture with minimal visual constraints
Well suited for integration with custom design systems
Supports multiple frontend frameworks
Composable row models and controlled state management

Things to consider

This flexibility comes with additional implementation responsibility. TanStack Table provides the underlying table logic rather than a complete grid interface, so developers must implement or integrate the UI rendering, styling, semantic markup, accessibility, focus management, and keyboard interactions required by their application. Features available out of the box in component-based grids may therefore require additional development, integration, and testing.

Ideal use cases

TanStack Table is a strong choice for SaaS applications, internal platforms, design-system-driven products, and teams that prioritize flexibility over out-of-the-box functionality.

3. Syncfusion JavaScript DataGrid

Syncfusion JavaScript DataGrid is a feature-rich HTML5 data grid component for displaying and managing tabular data in JavaScript applications. It includes data binding, editing, Excel-like filtering, custom sorting, aggregation, selection, and export support for Excel, CSV, and PDF formats.

It is designed for applications where the grid supports real business workflows, not only data display. Teams can bind data from local and remote data sources, including JavaScript object arrays, JSON, OData services, REST APIs, and other supported endpoints through DataManager.

Key strengths

Broad built-in functionality for data presentation and editing
Local and remote data binding through DataManager
Filtering, grouping, sorting, summaries, and selection
Export options for Excel, CSV, and PDF.
Responsive layouts, themes, and localization support

Things to consider

Applications that require complete control over markup and interaction behavior may prefer a headless solution. Teams should also evaluate licensing, package size, required modules, framework compatibility, and whether the broader component suite aligns with their project needs.

Ideal use cases

Syncfusion JavaScript DataGrid works well for ERP modules, CRM systems, inventory management applications, business dashboards, reporting portals, and enterprise applications with complex data workflows.

4. Handsontable

Handsontable approaches data grids from a different angle. Rather than focusing primarily on data presentation, it emphasizes spreadsheet-style interaction and editing experiences.

Users can work directly with cells, making it a natural fit for workflows where entering, validating, and manipulating data is more important than simply viewing it.

Organizations migrating spreadsheet-based processes to web applications often find Handsontable particularly appealing because it provides familiar interaction patterns that reduce the learning curve for end users.

Key strengths

Spreadsheet-like user experience
Cell-based editing workflows
Familiar copy-and-paste interactions
Validation and structured data-entry capabilities
Framework support across modern JavaScript ecosystems

Things to consider

Not every application benefits from spreadsheet-style behavior. If users primarily view data rather than actively edit and manipulate it, a traditional data grid may be a better fit.

Ideal use cases

Handsontable is well suited for planning tools, budgeting systems, resource management applications, inventory workflows, financial data-entry screens, and other spreadsheet-oriented business processes.

Read the full blog post on the Syncfusion Website

Why Your Browser Freezes with Large Excel Files in JavaScript Spreadsheet Apps and How to Fix It

Lucy Muturi — Wed, 22 Jul 2026 09:57:13 +0000

TL;DR: Browser freezes with large Excel files are usually caused by inefficient rendering, not data size. This blog explores how modern spreadsheet architectures handle large datasets using virtualization and optimized processing to deliver smooth performance in web applications.

Your browser freezes.
Scrolling lags.
Even editing a single cell feels slow.

If you’ve ever tried opening a large Excel file, say 50K, 100K, or more rows, in a web app, you’ve probably hit this wall. And it’s frustrating, because the data itself isn’t the real problem.

The truth is, most spreadsheet performance issues in the browser come down to how the data is handled, not how much of it exists.

Let’s break that down and look at how the Syncfusion^® JavaScript Spreadsheet component handles this at scale.

It’s not the data. It’s the way it’s rendered.

It’s easy to assume that your dataset is just “too big.” But modern browsers can handle large datasets just fine as long as you don’t try to do everything at once.

What usually goes wrong?

When a spreadsheet loads a large dataset in the naive way, it tries to:

Render every cell into the DOM
Keep all rows active in memory
Recalculate formulas immediately
Repaint the layout on every interaction

Individually, these are fine. Together, they overwhelm the browser’s single thread.

And that’s when things start to freeze.

Where the slowdown really comes from

If you zoom into what’s happening behind the scenes, a few patterns show up consistently.

Too many DOM elements: Rendering thousands of rows means creating thousands (or hundreds of thousands) of DOM nodes. That’s expensive, not just to create, but also to maintain as the UI updates.
Layout recalculations: Scrolling or editing forces the browser to constantly reflow and repaint the UI. With a large grid, even small changes cascade into noticeable lag.
Blocking operations: Large file parsing or synchronous calculations can block the main thread. While that work is happening, your UI has no chance to respond.
Memory pressure: Keeping everything loaded values, styles, formulas adds up quickly. As memory usage climbs, responsiveness drops.

None of this is unusual. It’s just what happens when the browser is asked to do too much, all at once.

A smarter way to handle large spreadsheets

The key shift is simple:

Don’t render everything; only render what the user can see.

This is where virtual rendering (often called virtual scrolling) changes everything.

Instead of loading an entire dataset into the DOM, you render just a small window of it, the visible rows and columns. As the user scrolls, the UI updates dynamically, swapping in the next set of data.

In practice, that means:

The DOM stays small and manageable
Scrolling remains smooth
The browser isn’t overwhelmed

A simple idea, but it has a huge impact.

Virtual scrolling is the most impactful technique for handling large spreadsheets in the browser, and it only works if the spreadsheet engine is built to support it at the architecture level.

From theory to practice: How Syncfusion handles it

This is exactly where a solution like Syncfusion JavaScript Spreadsheet makes a difference.

Instead of requiring you to build complex performance optimizations from scratch, it handles them internally, keeping your application responsive even with large datasets.

It’s designed to:

Render only what’s necessary at any given moment
Process large files progressively instead of all at once
Recalculate formulas efficiently without blocking interactions
Manage memory in a way that scales with your data

The result is a spreadsheet experience that remains smooth, even when working with tens of thousands of rows.

Large Datasets Rendering in JavaScript Spreadsheet Editor

Performance techniques in Syncfusion JavaScript Spreadsheet

Syncfusion applies several built-in optimizations across rendering, data processing, formula calculation, and memory management.

Here’s how each one contributes:

Rendering optimizations
1. Virtual scrolling renders only the visible cells, reducing DOM size and preventing scroll lag or Excel freeze.
2. A lightweight DOM structure with optimized re‑render cycles helps maintain smooth spreadsheet performance during editing and navigation.
Data processing
1. Chunk response processing loads large Excel files in smaller parts instead of a single heavy response, keeping the UI responsive and avoiding “large spreadsheet not responding” errors.
2. Optimized JSON serialization excludes unnecessary styles and objects to reduce payload size and improve file open speed.
3. Threshold limits prevent very large files from causing timeouts by capping the maximum data and file size.
4. Parsing options like IgnoreStyle and IgnoreFormat skip unnecessary styles to speed up large Excel imports.
Formula engine
1. An efficient formula engine recalculates only affected cells instead of the entire worksheet.
2. Manual calculation mode allows developers to delay formula updates during bulk operations, preventing UI freezes.
Save performance:
1. isFullPost= false option optimizes save operations for large files, bypassing heavy form submission, preventing save timeouts and delays.
Memory management
1. Efficient internal storage keeps memory usage low even with large datasets.
2. Disabling aggregate calculations improves selection performance on large ranges.

Read the full blog post on the Syncfusion Website

What’s New in Blazor 2026 Volume 2: AI, Analytics, and Productivity Enhancements

Lucy Muturi — Tue, 21 Jul 2026 10:42:02 +0000

TLDR: From AI-assisted editing and voice-enabled interactions to smarter analytics, project planning, and content authoring, Syncfusion Blazor 2026 Volume 2 introduces a range of developer-focused enhancements across its most-used components. Read the full blog to discover what’s new, see where these features fit into real applications, and learn how to get started.

A few years ago, building a Blazor application mostly meant assembling UI components and connecting APIs. Today, developers are expected to integrate AI experiences, analyze growing datasets, support richer content creation, and deliver all of it without sacrificing performance or usability.

That’s where many development teams spend their time—not building screens but solving the practical challenges behind them.

Syncfusion^® Blazor 2026 Volume 2 focuses on those challenges, introducing AI-assisted editing, smarter analytics capabilities, productivity improvements, and a new SDK packaging model that helps teams adopt only the components they need.

Before exploring the component updates, let’s take a quick look at this new packaging approach.

Pick the right SDK for your project

Not every application requires a full UI suite. A reporting platform may depend heavily on grids and charts, while a project management application might only need scheduling and planning components.

With the 2026 Volume 2 release, Syncfusion offers seven Standalone UI SDKs, each focused on a specific development area:

This model allows teams to adopt only the components relevant to their applications instead of starting with a broader collection of controls.

For projects spanning multiple functional areas, the UI Component Suite remains available. It includes the Grid SDK, Chart SDK, and File Manager SDK, with the Gantt, Scheduler, Diagram, and Rich Text Editor SDKs available separately.

Existing customers don’t need to make any licensing changes. Current entitlements remain unchanged, and all new Volume 2 features are available within existing license coverage. The Standalone UI SDK model only affects how new purchases are packaged going forward.

Note: To learn more, see the Standalone UI SDKs announcement and the Essential Studio 2026 Volume 2 release blogs.

New Inline AI Assist: Bring AI into the editing experience

Many AI integrations still rely on separate chat panels, forcing users to switch between their content and the AI conversation. In content-heavy applications, that extra context switching can quickly disrupt productivity.

To address this, we introduce the Inline AI Assist, a new component that brings AI interactions directly into the editing surface. Users can select content, request changes, review responses, and apply updates without leaving their current context.

For example, in a Rich Text Editor, a user can highlight a paragraph, ask AI to simplify or rewrite it, and review the streamed suggestion immediately. The same experience fits naturally into IDEs, form-driven applications, and knowledge management tools.

The Blazor Inline AI Assist supports two interaction modes:

Inline mode: Displays AI suggestions next to the selected content, making it ideal for rewriting text, expanding summaries, or generating code without interrupting the editing process.
Pop-up mode: Provides a more conversational experience when users need broader assistance.

Key features

Inline and pop-up response modes.
Command actions with mention-style suggestions.
Accept, discard, and custom response actions.
Configurable action toolbar.
Automatic Markdown-to-HTML rendering.
Streaming responses with stop controls.
Visual indicators for thinking and editing states.
Customizable appearance.

Inline AI Assist for Blazor

Note: Explore the Inline AI Assist demo or follow the getting started documentation to add it to your Blazor application.

Get started faster with Syncfusion Blazor templates

Getting a new Blazor project up and running often involves repetitive setup before development can begin. To streamline that process, Syncfusion provides .NET templates that align closely with Microsoft Blazor Web App templates.

These templates generate a fully configured Blazor application with Syncfusion components, themes, and dependencies already in place.

Each template includes:

NuGet package references,
Theme and script configuration,
Required namespace imports,
Project setup and Syncfusion integration.

This helps developers spend less time configuring their projects and more time building application features.

AI AssistView: Making AI experiences more natural for end users

While the new Inline AI Assist focuses on in-context editing, the existing Blazor AI AssistView continues to improve the experience for chat-style AI interactions. In this release, the focus is on making conversations more accessible while giving users greater control over how they interact with AI-generated responses.

Use voice instead of typing

Users can now dictate prompts using built-in speech recognition through the AssistViewSpeechToText tags. This removes the need for developers to integrate a separate speech-to-text solution for prompt entry.

Voice input can be particularly useful for mobile users, field employees, or anyone who prefers speaking over typing when interacting with AI.

Speech-to-text conversion in Blazor AI AssistView

Regenerate and compare responses

AI-generated answers aren’t always perfect on the first attempt. To make refinement easier, users can now regenerate responses and switch between different versions using navigation controls.

Rather than replacing the previous answer, AI AssistView retains all generated variations in the RegeneratedResponses collection. This makes it easier to compare alternatives and choose the most useful response for the task at hand.

Listen to responses with text-to-speech conversion

AI AssistView can now read responses aloud, enabling hands-free interaction.

Developers can configure output settings such as Language, Voice, and Volume, helping tailor the experience to different accessibility and user requirements.

This is especially valuable for accessibility-focused applications or situations where users need to consume information while multitasking.

Add context with file attachments

The 2026 Volume 2 release also adds support for file attachments through the new AttachedFiles property and customizable AttachmentTemplate. This allows users to attach supporting documents while giving developers full control over how attachments are presented in the interface.

A practical example is an AI assistant that analyzes invoices, reports, specifications, or other uploaded documents and uses them as context for generating responses.

Blazor DataGrid: Reduce friction in everyday data management

The Blazor DataGrid receives several practical enhancements in this release, focused on tasks users perform every day, such as filtering data, updating records, and exporting results.

Filter different data types from one place

Filtering mixed datasets often requires switching between different filter interfaces for text, numeric, and date columns.

The filter bar now includes an inline operator selector, and the value editor automatically adapts to the column type. Depending on the field, users will see a text box, numeric editor, date picker, or drop-down list, making filtering faster and more intuitive.

Index.razor

<SfGrid TValue="Order" DataSource="@Orders" AllowPaging="true" AllowFiltering="true">
    <GridFilterSettings ShowFilterBarOperator="true" Type="FilterType.FilterBar" />
    <GridColumns>
        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer ID" Width="150" />
        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" />
    </GridColumns>
</SfGrid>

This is especially useful in business applications where users frequently filter across different data types.

Blazor DataGrid with Filter bar

Speed up data entry with single-click editing

For data-entry-heavy applications, even small interaction improvements can save time.

A new AllowEditOnSingleClick option lets users start editing a cell with a single click in batch edit mode, eliminating the need for a double-click.

Index.razor

<SfGrid TValue="Order"
        DataSource="@Orders"
        AllowPaging="true"
        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
    <GridEditSettings AllowAdding="true"
                      AllowEditing="true"
                      AllowDeleting="true"
                      Mode="EditMode.Batch"
                      AllowEditOnSingleClick="true" />
    <GridColumns>
        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer ID" Width="150" />
        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" />
    </GridColumns>
</SfGrid>

In scenarios such as inventory management, finance, or operations dashboards, reducing clicks can make repetitive updates noticeably more efficient.

Preserve international characters in CSV exports

CSV exports now support a configurable Encoding property through ExcelExportProperties.

Using UTF-8 helps ensure names, symbols, accented characters, and multilingual content remain intact when files are opened in different systems or regional environments.

Index.razor

<SfGrid TValue="Order"
        @ref="Grid"
        DataSource="@Orders"
        Toolbar="@(new List<string>() { "CsvExport" })"
        AllowExcelExport="true">
    <GridEvents OnToolbarClick="ToolbarClick"
                TValue="Order" />
    <GridColumns>
        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer ID" Width="150" />
        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" />
    </GridColumns>
</SfGrid>

@code {
    SfGrid<Order>? Grid;
    List<Order> Orders { get; set; }

    public void ToolbarClick(ClickEventArgs args)
    {
        Grid.ExportToCsvAsync(
            new ExcelExportProperties
            {
                Encoding = System.Text.Encoding.UTF8
            }
        );
    }
}

This is particularly valuable for applications that work with global customer data or multilingual datasets.

Pivot Table: Build self-service analytics without extra backend work

The Blazor Pivot Table receives several enhancements that make it better suited for self-service analytics and reporting applications.

Built-in CRUD support with configurable server-side controller endpoints, allowing developers to connect existing backend services without building custom data management layers.
Percentage of running total as a new aggregation type, helping users analyze trends and understand how values contribute to cumulative totals over time.
Classic layout support in the server-side engine, improving consistency and scalability when working with larger datasets.

These additions make it easier to build interactive analytics experiences while reducing the amount of custom implementation required.

Enhancements in Blazor Pivot Table

Charts: Improve readability in dense visualizations

The Blazor Charts component receives two enhancements that help users interpret data more quickly, especially in charts with multiple series or dense time-based data.

Display series names directly on the chart

Instead of relying solely on legends, developers can now display series names directly within the chart by setting SeriesLabelSettings.Visible to true.

Labels can be customized for position, alignment, formatting, and visibility, helping users identify data series without shifting their focus between the chart and legend.

Series label in Blazor Charts

Note: For more details, review the series label documentation and Line Chart demo.

Create cleaner step charts

A new ShowRisers option on ChartSeries allows developers to hide vertical riser lines in step line and step area charts.

This can reduce visual clutter and make value changes easier to follow, particularly in dense time-series visualizations. The option supports left, right, and center step positions.

Note: See the Step Area Chart without riser documentation and demo for more insights.

Diagram: Better UML modeling and more interactive annotations

The Blazor Diagram component expands its modeling capabilities in this release while giving developers greater control over diagram annotations.

Create UML class diagrams more easily

Developers can now build UML class diagrams with built-in support for common object-oriented design elements, including:

Classes
Interfaces
Enumerations
Associations
Aggregations
Compositions
Inheritance relationships
Dependencies

Creating UML class diagrams using the Blazor Diagram component

This makes the Diagram component a stronger fit for architecture reviews, system-design tools, and developer-focused applications where software structures need to be visualized and maintained.

Make annotations interactive

Annotations can now support user interactions such as selection, dragging, resizing, and rotation.

These capabilities are controlled through the annotation’s Constraints settings and remain disabled by default, ensuring existing diagrams continue to behave as expected until explicitly enabled.

Add clickable hyperlinks to annotations

Annotations can now include hyperlinks through HyperlinkSettings.

Developers can define a destination using the Url property, customize the displayed text with the Content property, and control how links open using the OpenMode property.

This is particularly useful for linking diagram elements to documentation, specifications, support resources, or related application pages.

Read the full blog post on the Syncfusion Website

How to Integrate React Spreadsheet with Azure Blob Storage for Seamless Excel Management

Lucy Muturi — Fri, 17 Jul 2026 11:42:19 +0000

TL;DR: Excel still powers countless business processes, but working with cloud-hosted files often means juggling downloads, edits, and uploads. See how to integrate React Spreadsheet with Azure Blob Storage to let users work with Excel files directly in the browser while keeping everything centralized in the cloud.

Imagine you’re building a reporting dashboard that stores monthly sales reports in the cloud.

A user spots an issue in an Excel file, downloads it, makes a quick update, and uploads it again. No big deal, right?

Now imagine that same process repeated across multiple teams, hundreds of files, and dozens of updates every day. Suddenly, a simple edit turns into a cycle of downloads, uploads, version conflicts, and extra maintenance.

The bigger question is: why are users still leaving your application just to update a spreadsheet?

This is a common challenge in reporting platforms, financial systems, and internal business applications where Excel remains a critical part of daily operations. Without built-in spreadsheet integration, developers often end up creating custom file-handling processes just to manage files stored in the cloud.

In this article, we’ll explore how to integrate Azure Blob Storage with the Syncfusion React Spreadsheet component, allowing users to open, edit, and save Excel files directly in the browser. The result is a faster, more streamlined experience for users and a simpler file management process for developers.

Why does this approach work well for cloud-based Excel file management?

When working with cloud-hosted spreadsheets, the challenge isn’t simply rendering Excel files.

The real challenge is handling file transfers, serialization, conversion, and storage efficiently while maintaining an experience that users already understand.

Instead of building custom file-processing layers yourself, it’s worth looking at how the Syncfusion React Spreadsheet component handles these common challenges out of the box.

It provides built-in APIs for opening and saving workbooks while supporting server-side processing through Syncfusion Document Processing Libraries.

Open Excel files from multiple sources

Multi-source file loading: Open files from local uploads, external URLs, blob data, Base64 strings, or server endpoints.
User-friendly access: Open files through the built-in ribbon menu or programmatically through APIs.
Deserialization: Use the openFromJson method to restore a workbook from JSON while preserving data, formatting, and structure.
Lifecycle events: Use the beforeOpen and openComplete events to implement custom logic and validations.
Optimized loading: Improve large-workbook loading performance through efficient processing techniques.
Secure access: Pass custom headers such as authentication tokens when accessing protected resources.
Format compatibility: Supports .xlsx, .xls, .xlsm, .xlsb, and .csv formats.

Save changes back to cloud storage

Flexible save targets: Save files locally or send workbook data to backend services using JSON or Blob formats.
Intuitive access: Save files through the ribbon interface or programmatically through the API.
Serialization: Use the saveAsJson method to serialize workbook data for storage or server-side processing.
Server-side conversion: Convert serialized workbook data back to Excel using Syncfusion Document Processing Libraries.
*Event hooks: Customize the save operations with the beforeSave and saveComplete events, perfect for logging, validation, or triggering additional actions.
PDF export options: Export spreadsheets as PDF documents while preserving layout and formatting.

These capabilities simplify spreadsheet file handling by reducing the amount of custom code required to load, process, and save Excel files in cloud-based apps.

Prerequisites

To get started, make sure both the frontend and backend pieces are in place. Setting these up first will make the integration steps much easier to follow.

Frontend setup

Step 1: Create the React application

Create a React project created using your preferred setup tool, such as Create React App or Vite.

Step 2: Install the Syncfusion React Spreadsheet component

Next, install the React Spreadsheet component:

npm install @syncfusion/ej2-react-spreadsheet

For additional configuration details, refer to the Syncfusion React Spreadsheet documentation.

Step 3: Render the Spreadsheet component

Once the package is installed, add the React Spreadsheet to your app and verify it renders correctly. At this stage, the toolbar and ribbon should be enabled so users can access built-in spreadsheet actions.

Backend setup

With the frontend ready, the next step is to configure a backend service that can communicate with Azure Blob Storage and handle Spreadsheet open and save operations.

Step 1: Create an ASP.NET Core Web API project

Create a new ASP.NET Core Web API project. This service acts as a bridge between the React Spreadsheet component and Azure Blob Storage, handling file retrieval and storage.

Step 2: Install required NuGet packages

Add the following packages to support Azure Blob Storage integration and Spreadsheet processing:

Install-Package Azure.Storage.Blobs
Install-Package Syncfusion.EJ2.Spreadsheet.AspNet.Core

Step 3: Configure Azure Blob Storage settings

Azure Blob Storage supports multiple authentication methods, including:

Storage account connection strings,
Shared Access Signatures (SAS), and
Managed identities.

In our blog, the BlobServiceClient is configured using a storage account connection string, while SAS tokens and Managed identities can be used in environments that require more granular or credential-free access control.

Next, add your Azure Blob Storage configuration to the appsettings.json file. The backend uses these settings to access and manage Excel files stored in your Azure container.

appsettings.json

"connectionString": "your-azure-storage-connection-string",
"containerName": "your-container-name"

Note: Ensure that the Azure Blob Storage container exists, the required Excel files are uploaded, and the configured connection string has sufficient permissions to access the container. Also, verify storage account networking and access settings to avoid authorization or file access errors. Failure to meet these requirements may result in errors such as 403 AuthorizationFailure or File not found during open and save operations.

Note: If you need guidance on setting up the open and save services locally, see our detailed blog: Hosting open and save services for a Spreadsheet with ASP.NET Core and Docker.

What happens behind the scenes when users open and save files?

Before diving into the implementation, let’s take a quick look at how spreadsheet data moves between the React app, the ASP.NET Core service, and Azure Blob Storage during open and save operations.

At a high level, the React Spreadsheet component handles the editing experience, while the ASP.NET Core service manages file processing and communication with Azure Blob Storage. This keeps the browser focused on user interaction while the server handles Excel-specific operations.

Understanding this flow makes it easier to see how files are retrieved, processed, and stored throughout the application.

How Excel files move from Azure Storage to the browser

When a user opens a spreadsheet, the file is retrieved from cloud storage, processed by the backend, and then loaded into the Spreadsheet component for editing.

The process typically follows these steps:

Client request: The React app initiates a request to open an Excel file stored in Azure Blob Storage.
File retrieval: The ASP.NET Core Web API backend uses the Azure SDK (Azure.Storage.Blobs) to fetch the Excel file from the specified blob container.
Workbook processing: The backend wraps the downloaded stream in an OpenRequest object and passes it to the Workbook.Open method. This converts the Excel file into a JSON object containing all sheets, formatting, formulas, and styles.
Load in the Spreadsheet: The generated JSON is returned to the frontend, where it is loaded into the React Spreadsheet component using the openFromJson method.

Refer to the following image.

Azure Storage

How Excel files are saved back to Azure Blob Storage

After users finish editing, the updated workbook can be saved back to cloud storage through the backend service.

The saving process works as follows:

Workbook serialization: The React app calls the saveAsJson method to serialize the current workbook state.
Request preparation: The serialized data is packaged into a FormData object along with details such as the file name, save type, and any optional export settings.
Workbook generation: The ASP.NET Core Web API receives the JSON and uses the Workbook.Save method to convert it into an Excel stream.
Upload to Azure Blob Storage: The backend uploads the Excel stream using the Azure SDK (BlobClient.UploadAsync), storing it in the specified container with the specified file name and extension.

The following diagram illustrates the save process.

Azure Storage

By handling file conversion and storage operations on the server, this approach simplifies Excel file management while keeping the client lightweight. Users can make updates directly within the app without relying on manual download-and-upload steps.

Open cloud-stored Excel files directly in your React app

Now that the architecture is clear, let’s implement the file-open process.

Step 1: Create an API endpoint to retrieve files from Azure Blob Storage

On the backend, fetch the Excel file from Azure Blob Storage, convert it to Spreadsheet-compatible JSON by passing the OpenRequest into the Open method, and then return it to the React Spreadsheet component:

SpreadsheetController.cs

using System;
using System.IO;
using System.Threading.Tasks;
using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Specialized;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using Syncfusion.EJ2.Spreadsheet;

namespace WebAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class SpreadsheetController : ControllerBase
    {
        //Read Azure Blob Storage settings from configuration
        private readonly BlobServiceClient _blobServiceClient;
        private readonly string _storageContainerName;
        private readonly ILogger<SpreadsheetController> _logger;

        // Constructor for spreadsheetController
        public SpreadsheetController(IConfiguration configuration, BlobServiceClient blobServiceClient, ILogger<SpreadsheetController> logger)
        {
            // Store the Blob Service client used to access Azure Blob Storage.
            _blobServiceClient = blobServiceClient;

            // Store the logger for error tracking and diagnostics.
            _logger = logger;

            // Retrieve the target container name from application configuration.
            _storageContainerName = configuration.GetValue<string>("containerName");

            // Validate that a container name has been configured.
            if (string.IsNullOrEmpty(_storageContainerName))
            {
                throw new InvalidOperationException("Configuration 'containerName' is missing or empty.");
            }
        }

        [HttpPost]
        [Route("OpenFromAzure")]
        public async Task<IActionResult> OpenFromAzure([FromBody] FileOptions options)
        {
            try
            {
                using (MemoryStream stream = new MemoryStream())
                {
                    string fileName = options.FileName + options.Extension;
                    // Get a reference to the configured Azure Blob Storage container
                    BlobContainerClient containerClient = _blobServiceClient.GetBlobContainerClient(_storageContainerName);

                    // Get a reference to the target Excel file (blob) within the container.
                    BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName);

                    // Validate file existence
                    if (!await blockBlobClient.ExistsAsync())
                    {
                        return NotFound("File not found.");
                    }

                    // Download file from Azure Blob Storage
                    await blockBlobClient.DownloadToAsync(stream);
                    stream.Position = 0;

                    // Wrap stream as FormFile
                    OpenRequest open = new OpenRequest
                    {
                        File = new FormFile(stream, 0, stream.Length, options.FileName, fileName)
                    };

                    // Convert Excel file to JSON
                    var result = Workbook.Open(open);

                    return Content(result, "application/json");
                }
            }
            catch (Exception ex)
            {
                // Log the exception
                _logger.LogError(ex, "Failed to load spreadsheet from Azure Blob Storage.");

                // Return an error response with the exception message.
                return StatusCode(StatusCodes.Status500InternalServerError, "Error occurred while processing the file.");
            }
        }

        // Receives file details from client
        public class FileOptions
        {
            public string FileName { get; set; } = string.Empty;
            public string Extension { get; set; } = string.Empty;
        }
}
}

Step 2: Load the workbook into the React Spreadsheet

With the API endpoint in place, call it from your React app and load the returned JSON using the openFromJson method.

index.js

// Function to open a spreadsheet file from Azure Blob Storage via an API call
  const openFromAzure = () => {
    spreadsheet.showSpinner();

    // Make a POST request to the backend API to fetch the file from Azure Blob Storage. Replace the URL with your local or hosted endpoint URL.
    fetch('http://localhost: your_port_number/api/spreadsheet/OpenFromAzure', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        FileName: fileInfo.name, // Name of the file to open
        Extension: fileInfo.extension, // File extension
      }),
    })
      .then((response) => response.json()) // Parse the response as JSON
      .then((data) => {
        spreadsheet.hideSpinner();

        // Load the spreadsheet data into the UI
        spreadsheet.openFromJson({ file: data, triggerEvent: true });
        showSuccessLoad();
      })
      .catch((error) => {
        spreadsheet.hideSpinner();
        showErrorToast(error);
      });
  };

Save updates directly to Azure Blob Storage

Once a workbook is loaded into the Spreadsheet component, users can edit it directly in the browser. The next step is to save those updates back to Azure Blob Storage, so the latest version remains available to everyone using the app.

Step 1: Serialize and send workbook data to the cloud

Use the saveAsJson method to serialize the current workbook data and send it to the backend for processing.

index.js

// Function to save the current spreadsheet to Azure Blob Storage via an API call
const saveToAzure = () => {
  // Convert the current spreadsheet to JSON format
  spreadsheet.saveAsJson().then((json) => {
    const formData = new FormData();

    // Append necessary data to the form for the API request
    formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save
    formData.append('saveType', loadedFileInfo.saveType); // Save type
    formData.append(
      'JSONData',
      JSON.stringify(json.jsonObject.Workbook)
    ); // Spreadsheet data
    formData.append(
      'PdfLayoutSettings',
      JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings
    );

    // Make a POST request to the backend API to save the file to Azure Blob Storage. Replace the URL with your local or hosted endpoint URL.
    fetch('http://localhost:your_port_number/api/spreadsheet/SaveToAzure', {
      method: 'POST',
      body: formData,
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(
            `Save request failed with status ${response.status}`
          );
        }
        showSuccessToast();
      })
      .catch((error) => {
        showErrorToast(error);
      });
  });
};

Read the full blog post on the Syncfusion Website

Building a React Sankey Diagram to Visualize California’s Energy Flow

Lucy Muturi — Thu, 16 Jul 2026 11:02:19 +0000

TL;DR: Complex data flows are often difficult to understand when hidden in spreadsheets or traditional charts. See how a React Sankey Diagram transforms California’s energy data into an interactive visualization, helping you uncover flow patterns, energy losses, and key insights with validation, tooltips, responsive layouts, and export support.

Imagine you’re reviewing an energy report and trying to answer a simple question:

Where does the energy actually go?

You may have the numbers, but tables and traditional charts often make it difficult to follow how energy moves through the system. A bar chart can compare values, but it can’t easily show how those values split, combine, or eventually reach their destination.

This is exactly the type of problem that a Sankey Diagram solves.

A Sankey Diagram visualizes movement between connected stages. The width of each connection represents the quantity being transferred, allowing viewers to immediately identify major contributors, distribution patterns, and losses throughout a process.

In this tutorial, we’ll use a simplified California energy dataset to build a React Sankey Diagram with Syncfusion. While the data is intentionally simplified, the implementation approach is the same one you can use in production dashboards, reporting systems, analytics portals, or operational monitoring applications.

By the end, you’ll have a reusable React component that makes complex flow-based data significantly easier to understand.

What you’ll build

We’ll create an interactive Sankey Diagram that shows:

Energy originating from sources such as Solar, Wind, Nuclear, Geothermal, Biomass, Coal, Petroleum, and Natural Gas.
Energy flowing into Electricity Generation.
Distribution across Residential, Commercial, Industrial, and Transportation sectors.
Final allocation into Energy Services and Rejected Energy.
Source-colored links for easier visual tracking.
Hover tooltips and visible node labels.
A responsive layout that adapts to different screen sizes.
Built-in printing and PNG export options.
Data validation that detects:
- Duplicate node IDs,
- Broken source or destination references, and
- Invalid flow values.

The final result isn’t just a demo visualization; it’s a foundation you can extend for reporting, operations monitoring, and analytics applications.

When a Sankey Diagram makes sense

A Sankey Diagram works best when the primary goal is understanding how something moves through a process.

Instead of focusing on comparisons or trends, it helps answer questions such as:

Where do the largest inputs come from?
How is a resource distributed?
Where do losses or bottlenecks occur?
Which paths carry the most volume?

For scenarios involving movement, allocation, or transformation of data, resources, or energy, a Sankey Diagram often communicates relationships more effectively than traditional charts.

Tip: If you’re comparing categories, use a bar chart. If you’re showing changes over time, use a line chart. Sankey Diagrams are most useful when the flow itself is the story.

Why use Syncfusion for a React Sankey Diagram?

You can build a Sankey Diagram from scratch using D3 or SVG, which gives you complete control over the visualization. However, that flexibility comes with the responsibility of maintaining the rendering logic, interactions, and responsive behavior yourself.

Syncfusion React Sankey Diagram offers a component-based alternative that helps you go from structured data to a production-ready visualization much faster. It includes built-in support for labels, legends, tooltips, responsiveness, printing, and exporting, reducing the amount of code you need to build and maintain.

Choose Syncfusion when:

You want to quickly transform data into a reusable dashboard component.
Your application already uses Syncfusion React components and benefits from a consistent look and feel across the UI.
You prefer a ready-made solution that includes common visualization features out of the box.

A custom D3 or SVG implementation may be a better fit only when your application requires a highly specialized layout or unique interactions that are not available through the component API.

Prerequisites

Before you begin, make sure you have Node.js installed, an existing React project, and a basic understanding of React and TypeScript.

Visualizing California’s energy flow pattern using a React Sankey Diagram

Now that the project setup is ready, let’s start building the diagram itself.

We’ll use a simplified California energy dataset to keep the example focused on the implementation rather than the data. Along the way, we’ll define the data structure, add a validation layer to catch common mistakes, and then render the complete Sankey Diagram with labels, tooltips, legends, printing, and export capabilities.

Step 1: Install the Syncfusion package

To get started, install the Syncfusion React Charts package:

npm install @syncfusion/ej2-react-charts --save

This package includes the React Sankey Diagram component along with supporting services for features such as tooltips, legends, and exporting.

Step 2: Understand the Sankey data model

Before moving into the chart configuration, it’s helpful to understand how Sankey data is organized.

Every Sankey Diagram is built from two core pieces:

Nodes represent the entities in your system.
Links represent the amount moving between those entities.

In our example, energy sources such as Solar and Natural Gas are nodes. The energy flowing between those sources and other stages in the system is represented by links.

Once you understand these two building blocks, creating and troubleshooting Sankey Diagrams becomes much easier.

Each node must have a unique id (string). You can also use offset (number) to adjust its vertical position and color (string) to customize its appearance.

Each link connects two nodes and requires a sourceId (string), targetId (string), and value (number). The source and target IDs must match existing node IDs, while the value determines the thickness of the link.

Refer to the following image for a better understanding.

Sankey Diagram nodes and links visualized as connected stages of flow

Important: Every sourceId and targetId must match a node id exactly. The strings are case-sensitive, so “Natural Gas” and “natural gas” are treated as two different node references.

Step 3: Prepare the California energy-flow dataset

For this tutorial, we’ll use a simplified version of a California energy-flow model.

The dataset is intentionally structured to mirror how energy moves through a real system. Energy starts at primary sources such as Solar, Wind, Petroleum, and Natural Gas. Some of that energy passes through Electricity Generation before reaching end-use sectors such as Residential, Commercial, Industrial, and Transportation. Finally, the flow is divided into useful output and energy losses.

This structure provides sufficient complexity to demonstrate how Sankey Diagrams handle branching paths, aggregation points, and losses without introducing unnecessary noise in the example.

Dataset note: The values used here have been simplified for demonstration purposes. Lawrence Livermore National Laboratory (LLNL) publishes detailed state-level energy-flow charts. If you’re building a production solution, replace these values with official data and reference the appropriate chart year.

Node data

index.ts

type EnergyNode = {
  id: string;
  offset?: number;
  color?: string;
};

type EnergyLink = {
  sourceId: string;
  targetId: string;
  value: number;
};

const nodes: EnergyNode[] = [
  { id: 'Solar', offset: 20, color: '#FDB462' },
  { id: 'Nuclear', offset: 40, color: '#80B1D3' },
  { id: 'Wind', offset: 50, color: '#BEBADA' },
  { id: 'Geothermal', offset: 60, color: '#8DD3C7' },
  { id: 'Natural Gas', offset: 80, color: '#FB8072' },
  { id: 'Coal', offset: 100, color: '#8C8C8C' },
  { id: 'Biomass', offset: 110, color: '#B3DE69' },
  { id: 'Petroleum', offset: -10, color: '#BC80BD' },
  { id: 'Electricity Generation', offset: -120, color: '#FFD92F' },
  { id: 'Residential', offset: 38, color: '#A6CEE3' },
  { id: 'Commercial', offset: 36, color: '#1F78B4' },
  { id: 'Industrial', offset: 34, color: '#33A02C' },
  { id: 'Transportation', offset: 32, color: '#E31A1C' },
  { id: 'Rejected Energy', offset: -40, color: '#BDBDBD' },
  { id: 'Energy Services', color: '#4DAF4A' }
];

Link data

index.ts

const links: EnergyLink[] = [
  { sourceId: 'Solar', targetId: 'Electricity Generation', value: 454 },
  { sourceId: 'Nuclear', targetId: 'Electricity Generation', value: 185 },
  { sourceId: 'Wind', targetId: 'Electricity Generation', value: 47.8 },
  { sourceId: 'Geothermal', targetId: 'Electricity Generation', value: 40 },
  { sourceId: 'Natural Gas', targetId: 'Electricity Generation', value: 800 },
  { sourceId: 'Coal', targetId: 'Electricity Generation', value: 28.7 },
  { sourceId: 'Biomass', targetId: 'Electricity Generation', value: 50 },
  { sourceId: 'Electricity Generation', targetId: 'Residential', value: 182 },
  { sourceId: 'Electricity Generation', targetId: 'Commercial', value: 351 },
  { sourceId: 'Electricity Generation', targetId: 'Industrial', value: 641 },
  { sourceId: 'Electricity Generation', targetId: 'Transportation', value: 20 },
  { sourceId: 'Electricity Generation', targetId: 'Rejected Energy', value: 411.5 },
  { sourceId: 'Natural Gas', targetId: 'Residential', value: 400 },
  { sourceId: 'Natural Gas', targetId: 'Commercial', value: 300 },
  { sourceId: 'Natural Gas', targetId: 'Industrial', value: 786 },
  { sourceId: 'Natural Gas', targetId: 'Transportation', value: 51 },
  { sourceId: 'Biomass', targetId: 'Industrial', value: 563 },
  { sourceId: 'Biomass', targetId: 'Transportation', value: 71 },
  { sourceId: 'Petroleum', targetId: 'Residential', value: 50 },
  { sourceId: 'Petroleum', targetId: 'Industrial', value: 300 },
  { sourceId: 'Petroleum', targetId: 'Transportation', value: 2486 },
  { sourceId: 'Residential', targetId: 'Rejected Energy', value: 432 },
  { sourceId: 'Residential', targetId: 'Energy Services', value: 200 },
  { sourceId: 'Commercial', targetId: 'Rejected Energy', value: 351 },
  { sourceId: 'Commercial', targetId: 'Energy Services', value: 300 },
  { sourceId: 'Industrial', targetId: 'Rejected Energy', value: 1535 },
  { sourceId: 'Industrial', targetId: 'Energy Services', value: 755 },
  { sourceId: 'Transportation', targetId: 'Rejected Energy', value: 1991 },
  { sourceId: 'Transportation', targetId: 'Energy Services', value: 637 }
];

Step 4: Validate the data before rendering

If you’ve ever spent time debugging a chart that refuses to render, you already know that data issues are often the culprit.

A single typo in a node ID, a missing reference, or an invalid value can silently break the visualization. These problems are easy to introduce, especially when chart data comes from APIs, spreadsheets, or transformed datasets.

To avoid that frustration, let’s add a small validation step before rendering. The following helper function checks for:

Duplicate node IDs,
Invalid source or target references,
Missing, zero, or negative values.

Refer to the following code example.

index.ts

function validateSankeyData(nodes: EnergyNode[], links: EnergyLink[]) {
  const nodeIds = new Set(nodes.map((node) => node.id));

  const duplicateIds = nodes
    .map((node) => node.id)
    .filter((id, index, array) => array.indexOf(id) !== index);

  if (duplicateIds.length > 0) {
    return `Duplicate node IDs found: ${duplicateIds.join(', ')}`;
  }

  const invalidLink = links.find(
    (link) =>
        !nodeIds.has(link.sourceId) ||
        !nodeIds.has(link.targetId) ||
        typeof link.value !== 'number' ||
        link.value <= 0
  );

  return invalidLink ? `Invalid Sankey link found: ${JSON.stringify(invalidLink)}` : null;
}

However, it does not replace full data-quality checks, such as:

Balance validation,
Circular-flow detection, or
Source-data auditing.

But it does catch the kinds of mistakes that commonly lead to broken visualizations and unnecessary debugging sessions.

Step 5: Render the React Sankey Diagram

With the dataset prepared and validated, we can finally render the diagram.

The component below brings everything together. It validates the dataset, renders the Sankey Diagram, enables tooltips and legends, and adds export and print actions, allowing the chart to be used in both interactive dashboards and reporting scenarios.

index.ts

import React, { useRef } from 'react';
import {
    SankeyComponent,
    SankeyNodesCollectionDirective,
    SankeyNodeDirective,
    SankeyLinksCollectionDirective,
    SankeyLinkDirective,
    Inject,
    SankeyTooltip,
    SankeyLegend,
    SankeyExport
} from '@syncfusion/ej2-react-charts';

// Include the EnergyNode, EnergyLink, validateSankeyData, nodes, and links
// declarations from the earlier sections in the same file, or import them
// from a separate data module.

export default function CaliforniaEnergySankey() {
    const sankeyRef = useRef<SankeyComponent | null>(null);
    const validationError = validateSankeyData(nodes, links);

    const exportAsPng = () => {
        sankeyRef.current?.export?.('PNG', 'california-energy-sankey');
    };

    const printChart = () => {
        sankeyRef.current?.print?.();
    };

    if (validationError) {
        return <div role="alert">{validationError}</div>;
    }

    return (
        <section
            role="region"
            aria-label="California energy flow Sankey chart"
            aria-describedby="california-energy-sankey-description">
            <p id="california-energy-sankey-description">
                This Sankey chart shows energy moving from primary sources through
                electricity generation and end-use sectors into energy services and
                rejected energy. The values are simplified for this tutorial.
            </p>

            <div style={{ marginBottom: '12px' }}>
                <button type="button" onClick={exportAsPng}>
                    Export as PNG
                </button>
                <button
                    type="button"
                    onClick={printChart}
                    style={{ marginLeft: '8px' }}
                >
                    Print
                </button>
            </div>

            <SankeyComponent
                ref={sankeyRef}
                id="california-energy-sankey"
                width="100%"
                height="560px"
                title="California Energy Flow Example"
                subTitle="Tutorial dataset adapted from LLNL energy-flow concepts"
                linkStyle={{
                    opacity: 0.65,
                    curvature: 0.55,
                    colorType: 'Source'
                }}
                labelSettings={{ visible: true, fontSize: 12 }}
                tooltip={{ enable: true }}
                legendSettings={{
                    visible: true,
                    position: 'Bottom',
                    itemPadding: 8
                }}
            >
                <Inject
                    services={[
                        SankeyTooltip,
                        SankeyLegend,
                        SankeyExport
                    ]}/>

                <SankeyNodesCollectionDirective>
                    {nodes.map((node) => (
                        <SankeyNodeDirective
                            key={node.id}
                            id={node.id}
                            offset={node.offset}
                            color={node.color}/>
                    ))}
                </SankeyNodesCollectionDirective>

                <SankeyLinksCollectionDirective>
                    {links.map((link, index) => (
                        <SankeyLinkDirective
                            key={`${link.sourceId}-${link.targetId}-${index}`}
                            sourceId={link.sourceId}
                            targetId={link.targetId}
                            value={link.value}/>
                    ))}
                </SankeyLinksCollectionDirective>
            </SankeyComponent>
        </section>
    );
}

Refer to the following image.

Visualizing California’s energy flow data using the React Sankey Diagram

Read the full blog post on the Syncfusion Website

Building Global Web Apps? Reduce Latency with Edge Computing

Lucy Muturi — Wed, 15 Jul 2026 11:29:58 +0000

TL;DR: Cut global latency from ~ 400 ms to under 100 ms by running application logic at the edge. Explore edge functions, real performance benchmarks, cost trade-offs, and when edge computing outperforms traditional serverless for building fast, scalable web apps.

Imagine a user in Sydney opens your app. Your server in Virginia processes the request, queries a database, and sends a response. The result? ~800 ms latency.

Now, imagine the same logic running at a nearby edge location, response time drops closer to 50–100 ms. That difference directly impacts user experience, engagement, and conversions.

Edge computing exists to solve this exact problem: unpredictable global latency.

Note: Example latency values; actual results depend on user location, network path, provider, workload, and origin distance.

This guide breaks down how edge computing works, where it fits in modern web architecture, and when it actually makes sense to use it.

Quick decision guide

Developers eventually ask: Should I actually use edge computing?

Here’s a practical framework to help you decide:

If your application needs...	Use
Authentication	Edge
Personalization	Edge
Static pages	CDN
Video processing	Cloud
AI inference	Cloud GPU
Geo routing	Edge
Heavy computation	Cloud
Real time data sync	Edge
Complex database queries	Cloud
Session management	Edge

How Edge computing works

Traditional cloud deployments run in a few fixed regions (e.g., us-east-1, eu-west-1). Users connect to the nearest region, but latency varies based on geography, often dramatically.

Edge computing changes that model.

Instead of a handful of regions, your application code runs across hundreds of global edge locations (PoPs). Requests are often served within tens of milliseconds, but total latency depends on network conditions, origin calls, and workload complexity.

Edge computing architecture

Here’s how a typical edge request flows through the system:

Edge Computing Architecture

The edge layer sits between users and your origin server, handling lightweight logic without a full round trip to your backend.

Edge vs CDN vs Cloud

Technology	Primary Purpose
CDN	Cache and deliver static content globally
Cloud	Run centralized backend logic (serverless/VMs)
Edge	Execute application logic at distributed locations near users

Note: CDN and edge computing have merged. Modern platforms like Cloudflare and Fastly offer both caching (CDN) and edge compute capabilities in one service.

Think of edge computing as globally distributed serverless functions triggered by HTTP requests.

Edge computing vs Traditional Serverless (Latency comparison)

Let’s compare a typical request:

Traditional Serverless (Single region)

Request travels to region → 100–200 ms
Cold start → 200–400 ms
Processing → ~50 ms
Response return → 100–200 ms

Total: **400–650 ms+

Edge execution

Request hits nearest edge → ~20 ms
Warm startup → ~0–5 ms
Processing → ~50 ms
Response → ~20 ms

Total: **~90–100 ms

Note: Example values for illustration; actual performance varies by workload.

Key takeaway

Edge computing doesn’t eliminate latency, it reduces variability and improves latency consistency compared to centralized deployments, but network conditions still affect performance.

Edge computing platforms: Cloudflare, Vercel, AWS

Cold starts are generally smaller than traditional serverless, but not eliminated. Some platforms (e.g., Lambda@Edge) can still experience noticeable startup latency. Each has trade-offs in runtime limits, ecosystem support, and developer experience.

Edge computing performance benchmarks (Latency and cost)

Let’s move beyond marketing claims to measurable performance data from production deployments.

Latency improvements (Real-world observations)

Testing a simple API endpoint (fetch user preferences, apply business logic, return JSON) across platforms:

US users: ~120 ms → ~45 ms
EU users: ~180 ms → ~50–55 ms
APAC users: ~450 ms → ~60–70 ms
Global P99: ~1200 ms → ~75–200 ms

The biggest gains happen when users are far from your origin.

Cost comparison (10M Requests / Month)

Cloudflare Workers: ~$5
Vercel Edge: ~$15–20
AWS Lambda@Edge: ~$7–8
Deno Deploy: ~$18–20

Note: Costs vary significantly based on execution time, data transfer, and storage usage. These estimates assume lightweight requests and minimal outbound bandwidth.

When Edge becomes cost-effective

High global traffic
Lightweight per-request compute
Performance directly impacts conversions

For local apps, traditional serverless is often cheaper and simpler.

Read the full blog post on the Syncfusion Website

Less Custom Code, Smarter Scheduling: What’s New in Pure React Scheduler 2026 Volume 2

Lucy Muturi — Mon, 13 Jul 2026 11:11:03 +0000

TL;DR: Essential Studio 2026 Volume 2 brings powerful updates to the Pure React Scheduler, including a mobile-friendly Agenda View, time zone support, load-on-demand data loading, resource grouping, and recurring event management. These enhancements help developers build faster, more scalable scheduling applications with less custom code.

Scheduling is one of those features that looks simple at first glance. In reality, once you start dealing with recurring appointments, multiple resources, users across different time zones, or thousands of events, things become significantly more challenging.

The latest enhancements in the Syncfusion^® Pure React Scheduler component are designed to simplify these challenges. Whether you’re building an appointment booking platform, a healthcare scheduling system, a workforce management solution, or an educational calendar application, these updates help reduce custom development effort while improving scalability, usability, and performance.

Let’s explore what’s new in the Essential Studio 2026 Volume 2 release for the Pure React Scheduler and see how these additions can help you create scheduling experiences that are easier to maintain, perform well at scale, and deliver a better experience for users.

See upcoming events faster with agenda view

Traditional calendar layouts work well on large screens, but they can become difficult to navigate on mobile devices or when multiple appointments overlap. Finding the next event often requires zooming, scrolling, or switching between views.

The new agenda view takes a different approach by presenting upcoming appointments as a clean, date-grouped list. Events are arranged chronologically, making it easy to scan what’s coming next without the visual complexity of a traditional calendar grid.

This view is especially useful when users care more about event details than calendar placement.

Designed for everyday scheduling

If you’ve built mobile scheduling screens before, you’ve likely encountered situations where a month or week view becomes cluttered. Agenda view solves that problem by prioritizing readability.

A healthcare application, for example, can display a doctor’s appointments for the day in a simple schedule. Likewise, a sales manager can quickly review meetings without navigating between multiple calendar views.

Why you’ll appreciate it

Optimized for mobile screens and compact layouts.
Displays upcoming events clearly with full details.
Displays appointments in chronological order, grouped by date and sorted by time.
Makes overlapping events easier to review.
Supports configurable date ranges to view single or multiple days.
Supports recurring events seamlessly.
Includes full keyboard accessibility support.

Example

App.tsx

import { Scheduler, EventSettings, AgendaView } from '@syncfusion/react-scheduler'; 
import { fifaEventData } from './dataSource'; 
//Event data imported from the data source file.

export default function App() {
const eventSettings: EventSettings = { dataSource: fifaEventData };
  return (
    <div>
        <Scheduler
            defaultSelectedDate={new Date(2026, 5, 11)}
            eventSettings={eventSettings}
        >
            <AgendaView />
        </Scheduler>
    </div>
  );
}

Refer to the following image.

Agenda view in Pure React Scheduler

Schedule confidently across time zones

Time zones seem straightforward until users begin joining events from different regions. Hard-coded conversions and custom date calculations can quickly become difficult to maintain.

The Scheduler now supports both global scheduler-level time zones and appointment-specific time zones, ensuring events display accurately regardless of users’ locations.

Once configured, time conversions happen automatically, reducing the amount of custom logic developers need to implement.

A practical example

Imagine a product team scheduling a meeting from New York while participants join from London, Singapore, and Sydney. Each attendee sees the meeting in their local time without any manual conversion.

This removes one of the most common sources of scheduling mistakes in distributed teams.

What does this simplify?

Automatically converts appointments between time zones.
Displays accurate start and end times for users worldwide.
Reduces scheduling confusion across regions.
Supports both scheduler-wide and appointment-level configurations.
Simplifies global application development.

Example

App.tsx

import { Scheduler, DayView, EventSettings, MonthView, WeekView } from '@syncfusion/react-scheduler';
import { fifaEventData } from './dataSource';

export default function App() {
    const timezone = 'UTC';
    const eventSettings: EventSettings = {
          dataSource: fifaEventData,
    };
  return (
   <div>
     <Scheduler
      defaultSelectedDate={new Date(2026, 5, 15)}
      eventSettings={eventSettings}
      timezone={timezone}
     >
      <DayView />
      <WeekView />
      <MonthView />
     </Scheduler>
    </div>
  );
}

Pure React Scheduler displaying different time zone options

Keep large schedules responsive with load-on-demand

As scheduling applications grow, performance can quickly become a challenge. Loading large volumes of appointments upfront increases payload size, slows rendering, and consumes unnecessary resources.

The new load-on-demand capability solves this by loading only the events needed for the currently visible date range. As users navigate between dates and views, the Scheduler fetches only the relevant data, keeping the experience fast and responsive.

Two ways to implement it

1. Manual data loading with onDataRequest

The onDataRequest event provides the active view’s start and end dates, allowing you to fetch and return only the events within that range.

2. Automatic loading with DataManager

The Syncfusion DataManager can automatically handle data requests during navigation, view changes, and CRUD actions. It sends the active date range to the server, enabling efficient server-side filtering.

Real-world use case

Consider a university scheduling system containing thousands of classes across multiple departments. Instead of loading the entire schedule, only the events for the current week or month are retrieved, helping the UI remain responsive as data grows.

Performance benefits

Reduces API payload sizes.
Improves rendering speed.
Minimizes memory usage.
Handles large datasets efficiently.
Delivers a faster, more responsive user experience.

Example

App.tsx

import { WeekView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';
import { DataManager, WebApiAdaptor } from '@syncfusion/react-data';

export default function App() {
        const data = new DataManager({
            url: 'https://ej2services.syncfusion.com/react/hotfix/api/schedule',
            adaptor: new WebApiAdaptor(),
            crossDomain: true
        });

        const eventSettings: EventSettings = {
            dataSource: data
        };
        return (
           <div>
            <Scheduler eventSettings={eventSettings}>
                <WeekView />
            </Scheduler>
           </div>
        );
}

Read the full blog post on the Syncfusion Website

Building Smarter .NET MAUI Apps? See What’s New in Syncfusion 2026 Volume 2

Lucy Muturi — Fri, 10 Jul 2026 15:45:05 +0000

TL;DR: The 2026 Volume 2 release brings major enhancements to .NET MAUI, including multi-agent AI AssistView experiences, conversation management, advanced chart visualization, DataGrid productivity improvements, built-in filtering, and TreeView checkbox support. These updates help you build more intelligent, data-driven, and user-friendly cross-platform applications with less custom code and better user experiences.

Modern applications are evolving rapidly, with growing demand for AI-powered experiences, interactive data visualization, and productivity-focused user interfaces. To help you meet these expectations, the Essential Studio^®2026 Volume 2 release for .NET MAUI introduces enhancements across AI experiences, data management, and visualization.

This release brings new capabilities that make it easier to build intelligent applications, work with data more effectively, and deliver richer user experiences. From improved AI interactions and conversation management to enhanced charting and productivity-focused data features, these updates help you create modern cross-platform applications with less effort.

Area	Highlights
AI AssistView	Multi-agent support, conversation management, and chat experience enhancements.
Cartesian Charts	Point color mapping and multilevel labels.
DataGrid	Multi-row dragging, built-in search, and undo/redo operations.
ListView	Built-in filtering UI
TreeView	Easier hierarchical item selection

Let’s explore the highlights of the 2026 Volume 2 release.

AI AssistView

AI-powered applications continue to evolve, and this release expands AI AssistView with features that make it easier than ever to build sophisticated conversational experiences.

Agent picker

Today’s applications often rely on multiple AI agents, each tailored for a specific task such as document summarization, coding assistance, customer support, or translation. With the new Agent Picker, users can switch between agents directly from the prompt editor without interrupting their workflow.

The selected agent appears as a compact chip with an icon and label, making it easy to identify the active assistant at a glance.

Agent Picker support in AI AssistView

Conversation management

As AI applications grow, managing conversations becomes just as important as generating responses. The new Conversation Management support enables developers to provide a dedicated conversation panel where users can:

Pin important conversations
Rename chats for easier identification
Filter conversations
Remove conversations that are no longer needed

This creates a familiar experience similar to modern AI chat platforms while keeping conversation history organized and accessible.

Conversation Management support in AI AssistView

AI chat experience enhancements

Several usability improvements have also been added to make AI interactions more seamless:

Image Preview allows users to open attached images in a larger view for easier inspection of screenshots, diagrams, and other visual content.

Image Preview support in AI AssistView

Time-based Message Grouping automatically organizes conversations into sections such as Today, Yesterday, and earlier dates, making long chat histories easier to navigate.

Time-based Message Grouping support in AI AssistView

Resizable Prompt Input provides additional editing space for longer prompts, detailed instructions, and code snippets.

Resizable Prompt Input support in AI AssistView

Together, these enhancements create a more natural and productive chat experience without requiring additional customization.

Cartesian Charts

The Cartesian Charts control gains new visualization capabilities that help developers present complex information more effectively.

Point color mapping

Data often needs visual differentiation to highlight categories, trends, or exceptions. Point Color Mapping allows colors to be assigned directly from the data source using brushes, color values, or hexadecimal color codes.

This makes it simple to create more expressive charts while keeping configuration straightforward.

Point Color Mapping support in Cartesian Charts

Multilevel labels

Large datasets frequently contain multiple layers of categorization. Multilevel Labels help organize axis labels into hierarchical groups, making complex information easier to interpret.

This enhancement is especially useful for dashboards, scheduling applications, financial reports, and business analytics solutions.

Multilevel Labels support in Cartesian Charts

DataGrid

This release introduces several DataGrid enhancements focused on improving productivity and reducing the effort required to work with large datasets.

Undo and redo support

Data entry mistakes are inevitable, especially when working with large collections of records. Undo and Redo support allows users to quickly reverse or reapply changes, providing greater confidence during editing operations.

Undo and redo support in DataGrid

Read the full blog post on the Syncfusion Website

Still Building Custom Chart Builders? Build Runtime Charts with Blazor Chart Wizard

Lucy Muturi — Fri, 10 Jul 2026 14:09:12 +0000

TL;DR: Building configurable dashboards usually means creating custom chart builders, field selectors, and persistence logic. Learn how the new Blazor Chart Wizard eliminates that work by letting users configure, save, and export charts directly at runtime.

A dashboard that starts with a simple column chart rarely stays that way.

Business users eventually ask to switch chart types, compare different metrics, save personalized layouts, and export visualizations without waiting for another development cycle.

Supporting these requests often requires developers to build configuration panels, field selectors, chart customization interfaces, persistence mechanisms, and export workflows. In many projects, maintaining the chart configuration experience becomes almost as much work as building the dashboard itself.

The Syncfusion^® Blazor Chart Wizard, a new component introduced in Essential Studio^® 2026 Volume 2 release, takes a different approach.

Instead of developers defining every chart configuration at design time, Chart Wizard provides a guided runtime experience that allows users to create, customize, save, restore, print, and export charts directly within a Blazor application.

In this article, you’ll build an Olympic medal dashboard using the Chart Wizard component. Along the way, you’ll learn how to:

Bind business data to Chart Wizard
Enable runtime chart customization
Allow users to save and restore chart layouts
Configure export functionality
Understand when Chart Wizard is a better choice than a traditional chart component

By the end, you’ll have a practical understanding of how Chart Wizard can reduce development effort while delivering more flexibility to end users.

Why not just use Syncfusion Chart?

Many Blazor applications already use the SfChart component to render charts. So why introduce another charting component? The answer comes down to who controls the visualization.

With the standard chart component, developers define:

Chart type
Series configuration
Axis settings
Data mappings
Styling options

Users interact with the finished chart, but typically cannot modify its structure without changes to the application.

When should you use Chart Wizard?

A standard chart component works well when developers control every aspect of the visualization.

Our Blazor Chart Wizard shines when users need flexibility after deployment.

Scenario	Standard Chart	Chart Wizard
Fixed chart configuration	Yes	No
Users switch chart types	No	Yes
Runtime field mapping	No	Yes
Dashboard personalization	No	Yes
Save and restore chart layouts	No	Yes
Lightweight visualization only	Yes	No

Think of Chart Wizard as a chart-authoring experience rather than a chart control.

What you will build

The completed sample includes:

An SfChartWizard component.
Medal data from the Paris 2024 Olympic Games.
Runtime chart configuration.
Chart layout persistence using serialization.
Built-in export capabilities.

The result is a dashboard where users can experiment with visualizations without requiring application updates.

Interactive Chart Wizard Visualization of Paris 2024 Olympic Medal Standings

How Chart Wizard fits into a dashboard

In a typical analytics solution, your application remains responsible for retrieving, securing, and validating data.

Chart Wizard sits on top of that data and provides a user-friendly configuration layer.

                   **Database / API**  
                           ↓  
                 **Application Services**  
                           ↓  
                    **SfChartWizard**  
                           ↓  
                      **End User**

This separation keeps business logic inside your application while giving users freedom to explore data visually.

New to Chart Wizard? The official Getting Started guide walks you through the complete setup process.

Building an Olympic medal dashboard with Chart Wizard

Let’s build an interactive Olympic medal dashboard that supports chart customization, layout persistence, and export.

Define the data model

Chart Wizard works with standard .NET objects, making it easy to integrate with existing business data. We’ll use a simple model representing Olympic medal standings.

public class OlympicMedalData 
{ 
    public string Country { get; set; } = string.Empty; 
    public int GoldMedals { get; set; } 
    public int SilverMedals { get; set; } 
    public int BronzeMedals { get; set; } 
}

Prepare sample Olympic medal data

In this example, we’ll use medal data from the Paris 2024 Olympics.

private readonly List<OlympicMedalData> MedalRecords = new() 
{ 
    new()
    {
        Country = "United States",
        GoldMedals = 40,
        SilverMedals = 44,
        BronzeMedals = 42
    },
    …
    new()
    {
        Country = "France",
        GoldMedals = 16,
        SilverMedals = 26,
        BronzeMedals = 22
    }
};

Configure category and series fields

Next, choose the category and series fields. The Chart Wizard uses category fields for labels and numeric fields for series, helping it determine the best way to visualize your data.

private readonly List<string> CategoryFields = new()
{
    "Country"
};
private readonly List<string> SeriesFields = new()
{
    "GoldMedals",
    "SilverMedals",
    "BronzeMedals"
};

Add the Chart Wizard component

We’ll add the SfChartWizard component to your Blazor page and bind it to the Olympic medal data.

razor

@using Syncfusion.Blazor.ChartWizard 

<SfChartWizard Width="100%" Height="600px"> 
    <ChartSettings DataSource="@MedalRecords" 
                   CategoryFields="@CategoryFields" 
                   SeriesFields="@SeriesFields" 
                   SeriesType="ChartWizardSeriesType.Column"> 
    </ChartSettings> 
</SfChartWizard>

What happens next?

After deployment, users can:

Switch chart types.
Modify series mappings.
Reconfigure the visualization.
Explore the data from different perspectives.

Without Chart Wizard, supporting these capabilities typically requires building custom interfaces.

You can use the SeriesType property to set the initial chart type, while the wizard allows configuration changes to supported chart types at runtime.

Interactive Chart Wizard Visualization of Paris 2024 Olympic Medal Standings

Enhance the Chart Wizard with advanced features

Save and restore chart configuration

Users often spend time configuring charts exactly the way they want. Serialization allows those configurations to be saved and restored later.

Two methods make this possible:

SaveChart(): Serializes the current chart state and returns it as a JSON string.
LoadChartAsync(string data): Loads a chart configuration from a JSON string produced by SaveChart().

Use the following example to wire save and restore buttons.

razor

<div class="toolbar" style="margin-bottom: 12px;">
    <button class="btn btn-primary" @onclick="SaveChartAsync">Save layout</button>
    <button class="btn btn-secondary"
            @onclick="LoadChartAsync"
            disabled="@string.IsNullOrWhiteSpace(serializedChart)">
        Restore layout
    </button>
</div>
@code
{
    //……
    private Task SaveChartAsync()
    { 
        if (ChartWizard is null)
        {
            statusMessage = "Chart Wizard is not ready yet.";
            return Task.CompletedTask;
        }
        serializedChart = ChartWizard.SaveChart();
        statusMessage = "Chart layout saved for this session.";
        return Task.CompletedTask;
    }

    private async Task LoadChartAsync()
    {
        if (ChartWizard is null || string.IsNullOrWhiteSpace(serializedChart))
        {
            statusMessage = "No saved chart layout is available.";
            return;
        }

        await ChartWizard.LoadChartAsync(serializedChart);
        statusMessage = "Saved chart layout restored.";
    }
    //…
}

The serialized output can be stored in:

Databases
Browser storage
Files
Cloud storage

This makes it possible to provide personalized dashboards that survive between sessions.

Chart Wizard with Serialization

Persist saved chart layouts

When storing chart configurations, remember that applications evolve.

Field names may change.
Data models may be reorganized.
Users may load configurations created months earlier.

For that reason, consider storing:

public class SavedChartLayout
{
    public int Id { get; set; }
    public string UserId { get; set; } = string.Empty;
    public string LayoutName { get; set; } = string.Empty;
    public string ChartStateJson { get; set; } = string.Empty;
    public string DataSchemaVersion { get; set; } = "v1";
    public DateTime UpdatedUtc { get; set; }
}

Save operation

var layout = new SavedChartLayout
{
    UserId = userId,
    LayoutName = "My Medal Dashboard",
    ChartStateJson = ChartWizard.SaveChart(),
    UpdatedUtc = DateTime.UtcNow
};

dbContext.ChartLayouts.Add(layout);
await dbContext.SaveChangesAsync();

Load operation

var layout = await dbContext.ChartLayouts
    .FirstOrDefaultAsync(x => x.Id == layoutId);
await ChartWizard.LoadChartAsync(layout.ChartStateJson);

Store a schema version with the layout. If you later rename GoldMedals to Gold, an old, saved layout may reference a field that no longer exists.

Handling invalid saved layouts

Saved layouts can become invalid if fields are renamed, removed, or reorganized after deployment.

Before calling LoadChartAsync(), consider validating:

Layout ownership
Schema version compatibility
Required fields
JSON format integrity

If validation fails, notify the user and fall back to a default chart configuration rather than attempting to restore the layout.

Read the full blog post on the Syncfusion Website

Need Faster Document Processing? See What's New in Document SDK 2026 Volume 2

Lucy Muturi — Wed, 08 Jul 2026 14:48:47 +0000

TL;DR: Struggling with complex document automation or AI integration? Syncfusion Document SDK 2026 Volume 2 introduces AI Agent Tools, Markdown conversion, enhanced OCR, and performance improvements across PDF, Word, Excel, and PowerPoint libraries to help you build faster, smarter, and more reliable document solutions.

If you’ve ever spent hours maintaining PDF parsers, fixing document conversion issues, or trying to make AI understand complex document content, you’re not alone. Document-heavy applications often become difficult to maintain as requirements grow across formats, platforms, and automation scenarios.

Syncfusion Essential Studio^® 2026 Volume 2 for Document Processing addresses these challenges with AI agent tools, Markdown conversion, and enhancements across PDF, Word, Excel, and PowerPoint libraries.

Here’s what’s new and why it matters in real-world applications.

Deterministic Document Processing for AI Agents

AI-powered document processes often break down at the same point: document structure. Large language models don’t natively understand PDFs, Word files, or spreadsheets. Teams end up stitching together prompts, parsers, converters, and validators, creating pipelines that are hard to maintain and easy to break.

AI Agent Tools for the Document SDK

The Syncfusion AI Agent Tools library addresses this by providing AI agents with direct access to reliable, production-ready document operations via callable tools powered by the Syncfusion Document SDK.

Instead of asking an LLM to “figure out” document structure, agents can now invoke deterministic operations such as:

PDF: Create, convert, redact, sign, merge, and compress PDFs.
Word: Perform mail merge, track changes, and convert documents.
Excel: Create charts, work with formulas and pivot tables, and export data.
PowerPoint: Merge, split, and convert presentations.
Office-to-PDF: Convert Word, Excel, and PowerPoint files to PDF.
Smart Data Extraction: Extract tables, forms, text, and scanned-image content as structured JSON.

The library runs entirely within your infrastructure on-premises or private cloud and integrates with OpenAI, Azure OpenAI, Claude, or custom orchestration systems. Documents never leave your environment.

Execution can be handled entirely in memory for low-latency operations or through cloud-backed storage (Azure Blob Storage or Amazon S3) for scalable, stateless processing.

Real-world example: An insurance claims application can use AI Agent Tools to extract data from uploaded documents, generate reports, convert files, and archive records without relying on custom parsing logic for each document type.

Download the AI Agent Tools NuGet package and extend it with your own custom AI agent tools by cloning the open-source repository for the real-world use cases.

Document SDK AI Tools

Agent Skills: Accurate SDK code inside your IDE

Alongside AI Agent Tools, Document SDK Agent Skills focus on developer productivity.

Agent Skills ground AI coding assistants in verified Syncfusion APIs, eliminating outdated or hallucinated code suggestions. When installed, supported IDEs and assistants can generate accurate, production-ready code using the correct NuGet packages and platform-specific patterns.

Agent Skills support:

Word, PDF, Excel, PowerPoint, Markdown, data extraction, and calculation libraries
.NET, Java, Flutter, and JavaScript platforms
Works with GitHub Copilot, Visual Studio Code, Code Studio, Cursor, Claude, and more.
Two operating modes: Generate code (Mode 1), Execute via csx script (Mode 2)
One-command installation and granular skill selection
Auto loaded by supported agents

Depending on the prompt style, developers can either generate ready-to-use code snippets or execute document actions directly via temporary scripts.

Real-world example: A development team building a document management system can generate SDK-specific code directly inside their IDE, reducing time spent searching documentation and correcting AI-generated code suggestions.

Stop building fragile LLM-to-document pipelines from scratch! Explore Syncfusion AI Agent Tools documentation and Document SDK Agent Skills documentation to get started.

Markdown as a first-class enterprise format

Markdown has become the preferred authoring format for developers and content teams, but most enterprise delivery still happens in Word, Excel, PowerPoint, and PDF. Bridging that gap manually slows everything down.

.NET Markdown Library (Preview)

The Syncfusion .NET Markdown Library introduces a structured document object model for Markdown, allowing developers to create, read, and edit Markdown programmatically without external dependencies.

What you can build and format

Document creation with DOM: Create Markdown documents programmatically using a structured, intuitive object model for clean, maintainable code.
Rich content support: Add and organize Headings, paragraphs, block quotes, thematic breaks, tables, lists, and checkboxes.
Advanced text formatting: Apply rich formatting including bold, italic, strikethrough, inline code, subscript, and superscript.
Media and linking: Insert images and hyperlinks to enhance document interactivity.
Code block support: Easily include formatted code blocks for technical documentation.

Supported conversion:

Seamlessly convert Markdown to and from multiple popular file formats using Syncfusion libraries:

Word documents: Convert Markdown to Word and text formats such as .doc, .docx, .xml, .html, and .rtf, and convert Word documents to Markdown.
Excel documents: Convert Excel files to and from Markdown.
PowerPoint presentations: Convert PPTX files to Markdown and generate PPTX files from Markdown.
PDF documents: Convert Markdown to PDF format and convert PDF documents to Markdown.

Markdown File Format Conversions in .NET Markdown Library

The Syncfusion .NET Markdown Library covers more conversion targets than any comparable lightweight Markdown library, making it the practical choice for teams that need Markdown as a bridge between authoring and enterprise delivery formats.

Real-world example: A documentation platform can store content in Markdown and automatically publish it as Word, PDF, PowerPoint, and Excel files for different audiences without maintaining separate versions of the same content.

PDF enhancements across platforms

.NET PDF Library: HTML-to-PDF security update

HTML-to-PDF remains a core process for invoices, dashboards, and reports. In this release, the Blink binaries used for HTML-to-PDF conversion have been updated to version 147.0.7727.56, which addresses known security vulnerabilities and improves conversion reliability.

JavaScript PDF Library: Layout and metadata control

The JavaScript PDF Library now offers deeper layout-level control, enabling more complex client-side PDF generation.

New capabilities include:

Layout-aware text elements with styling, alignment, and automatic pagination.

Layout‑Aware Text Elements in JavaScript PDF Library

Reusable header and footer templates with static content and dynamic fields such as page numbers and dates.

Reusable Headers & Footers in JavaScript PDF Library

XMP metadata embedding for standardized document indexing, searchability, and archival procedures.

For more details, check our JavaScript PDF library documentation.

Real-world example: A reporting application can generate secure, metadata-rich PDF invoices and statements directly from HTML while improving document traceability and searchability.

Smarter Data Extraction and OCR control

.NET Data Extraction Library updates

Accuracy in document extraction often depends on how much control you have over OCR and image handling. This release adds two practical improvements to the Syncfusion .NET Data Extraction Library:

Custom image handling: Access extracted images as streams and choose whether to embed them directly in Markdown as base64 or reference them via URLs in cloud storage.
Configurable OCR settings: Fine-tune language selection, OCR engine version, image preprocessing, page segmentation, and multi-language handling before extraction begins.

These controls are especially valuable in healthcare, logistics, and financial processes where extraction accuracy directly affects downstream systems.

Real-world example: A healthcare provider can extract information from scanned patient records using customized OCR settings, improving recognition accuracy before the data is routed to downstream systems.

If your extraction pipeline is losing accuracy because OCR settings are locked down, this release gives you the control you’ve been missing. Explore the .NET Data Extraction Library documentation.

Excel, Word, and PowerPoint improvements

.NET Excel Library

Place images directly inside cells so they move and resize naturally with cell changes.

Images Inside Cells in .NET Excel Library

Convert Excel files to clean Markdown for documentation or publishing.

Convert Excel to Markdown in .NET Excel Library

Convert Markdown back into structured Excel data for reporting and analysis.

Convert Markdown to Excel in .NET Excel Library

Real-world example: A financial reporting application can convert spreadsheet data into Markdown for review, then regenerate structured Excel reports from updated content when publishing final results.

.NET Word Library

Up to 70% faster clone and merge operations, ideal for high-volume document generation
Improved HTML parsing with better support for attributes across paragraph and heading tags

This update delivers immediate, measurable gains for high-volume Word processing workloads. See the Syncfusion .NET Word Library documentation.

Real-world example: Organizations that generate thousands of personalized contracts or customer letters each day can reduce processing time by accelerating document cloning and merging.

Read the full blog post on the Syncfusion Website