DEV Community: Zahra Sandra Nasaka

Building an Optimistic UI Task App with React 19 and Next.js

Zahra Sandra Nasaka — Fri, 23 Jan 2026 13:43:11 +0000

TL;DR: Learn how to build a real-world task management app using React 19’s useOptimistic and useFormState hooks with Next.js and Syncfusion Data Grid. This guide demonstrates how to implement optimistic UI, handle client–server synchronization, and manage data efficiently for responsive web applications.

Modern users expect instant feedback when interacting with web applications. Waiting for server responses before updating the UI leads to poor user experience, especially in data-driven apps. React 19 addresses this challenge with built-in support for optimistic UI through the useOptimistic hook, making it easier to update the interface immediately while server actions run in the background.

In this blog, we explore how to integrate React 19’s new capabilities with Syncfusion^® Data Grid and Next.js to build a task management app that feels fast and responsive. You’ll see how optimistic updates, server actions, and structured data grids work together to create a smooth, production-ready user experience.

Why build an optimistic UI task app with React 19 and Data Grid?

Optimistic UI improves perceived performance by reflecting changes instantly
React 19 simplifies optimistic updates with first-class hooks.
Next.js enables clean client–server separation using Server and Client Components.
Syncfusion Data Grid handles structured data, selection, and updates reliably at scale.

Together, this stack is ideal for building modern, enterprise-ready React applications.

Why integrate React 19 with Syncfusion Grid?

React 19: Introduce’s useOptimistic for instant UI updates and useFormState for streamlined form handling.
Syncfusion Data Grid: Offers advanced features like data binding, row selection, sorting, and filtering for tabular data.
Next.js: Facilitates client-server communication with "use client" and "use server" directives, enabling scalable applications.
Optimistic updates: Enhance user experience by reflecting changes immediately, even before server confirmation.

We will create an application that enables users to add, update, and view tasks in a Syncfusion Data Grid, utilizing optimistic updates for a seamless experience and server-side logic for data persistence.

Application overview

The app includes:

A client-side form with Syncfusion TextBoxComponent and ButtonComponent for task input.
A GridComponent to display tasks, supporting row selection for editing
Server-side logic to process form submissions and ensure unique task IDs.
React 19’s useOptimistic for instant UI updates and useFormState for state management.
Next.js for handling client-server communication.

Prerequisites

To build a Next.js application with React 19, you need:

Node.js 18.17.0 or above
npm, pnpm, or yarn
React 19 (stable) and react-dom 19
Next.js 15.1 or later
A text editor (e.g., VS Code)

Setting up a Next.js application with Syncfusion

Once your environment is ready, you can begin setting up your task management application.

Step 1: Initialize the project

Create a new Next.js application by running the following command in your terminal:

npx create-next-app@latest my-next-app

During setup, select options such as TypeScript and App Router.

Step 2: Navigate to the Project Directory

Next, move into the newly created project folder.

cd my-next-app

Step 3: Understand project structure

Familiarizing yourself with the project structure will help you work more effectively:

app/ or pages/: Manages application routing.
public/: Stores static assets such as images and fonts.
styles/: Contains global and component-level CSS.
package.json: Manages project dependencies and scripts.
next.config.js: Used for Next.js configuration and customization.

Step 4: Install Syncfusion packages:

Install the required Syncfusion React component using npm:

npm install @syncfusion/ej2-react-grids \
@syncfusion/ej2-react-buttons \
@syncfusion/ej2-react-inputs

These packages provide advanced UI components, such as data grids, buttons, and input controls.

Step 5: Add Syncfusion Styles

To apply Syncfusion’s Material theme, add the following imports to your global stylesheet (styles/global.css):

@import "@syncfusion/ej2-react-grids/styles/material.css";
@import "@syncfusion/ej2-react-buttons/styles/material.css";
@import "@syncfusion/ej2-react-inputs/styles/material.css";

Step 6: Start the development server

Run the development server with the command below:

npm run dev

Open your browser and navigate to http://localhost:3000.

Your Next.js application should now be running successfully with Syncfusion components ready for development.

Server component implementation

The Next.js server component defined in page.tsx acts as the entry point for the application. It handles the root route (/) and is responsible for fetching the initial task data on the server before the page is rendered.

This approach ensures that task data is securely loaded and made available to the client without exposing server-side logic

Here’s the code implementation in page.tsx.

import TodoAppComponent from './components/TodoAppComponent';
import {getTasks} from './actions';

export default async function Home() {
    const initialTasks = await getTasks();
    return (
        <main className="min-h-screen bg-gray-100 flex items-center justify-center">
            <TodoAppComponent tasks={initialTasks} />
        </main>
    );
}

Key features

Server component: Runs exclusively on the server, enabling secure and efficient data fetching in Next.js.
Task type consistency: Uses the Task type implicitly through getTasks, aligning with client-side data structures.
Server-side data loading: Initializes task data by calling getTasks on the server and passes the fetched data to the client-side TodoAppClient for rendering in the Syncfusion Grid.

This setup ensures that initial data is loaded before the page is rendered, providing a smoother user experience and a clear separation between server-side data handling and client-side UI rendering.

Client-side Implementation

The client-side logic is defined in TodoAppComponent.tsx and marked with the "use client" directive. This component handles user interaction, optimistic updates, and Syncfusion Grid integration.

"use client";
import React, { useOptimistic, useState, useActionState } from "react";
import { submitTask } from "../actions";
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-grids";
import { TextBoxComponent } from "@syncfusion/ej2-react-inputs";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";

export type Task = {
    id: number | string;
    task: string; status?: string;
};

interface TodoAppClientProps {
    tasks: Task[];
}

export default function TodoAppComponent({ tasks }: TodoAppClientProps) {
    const [taskID, setTaskID] = useState("");
    const [taskName, setTaskName] = useState("");
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [state, formAction] = useActionState(submitTask, tasks);

    const [optimisticState, addOptimistic] = useOptimistic<Task[], Task>(
        state,
        (prevState, newTask) => {
            const existingTaskIndex = prevState.findIndex(task => task.id === newTask.id);
            if (existingTaskIndex !== -1) {
                return prevState.map(task =>
                    task.id === newTask.id ? { ...task, ...newTask } : task
                );
            } else {
                return [...prevState, newTask];
            }
        }
    );

    function rowSelected(args: any) {
        const row = args.data as Task;
        if (row) {
            setTaskID(String(row.id));
            setTaskName(row.task);
        } else {
            setTaskID("");
            setTaskName("");
        }
    }

    async function handleSubmit(formData: FormData) {
        if (isSubmitting) return;
        setIsSubmitting(true);
        const idField = formData.get("id") as string;
        const id = idField ? Number(idField) : "";
        const optimisticTask: Task = { id,
              task: "Saving...",
              status: ""
        };
        addOptimistic(optimisticTask);
        await formAction(formData);
        setTaskID("");
        setTaskName("");
        setIsSubmitting(false);
    }

    return (
        <form action={handleSubmit} style={{ padding: 24, marginTop: 80 }}>
            <input type="hidden" name="id" value={taskID} />

            <table className="border w-full mb-6">
                <tbody>
                    <tr>
                        <td className="px-4 py-2">Enter Task</td>
                        <td className="px-4 py-2">
                            <TextBoxComponent value={taskName} name="task" placeholder="Enter Task"/>
                        </td>
                    </tr>
                    <tr>
                        <td className="px-4 py-2">Enter Status</td>
                        <td className="px-4 py-2">
                            <TextBoxComponent name="status" placeholder="Enter Status" />
                        </td>
                    </tr>
                    <tr>
                        <td />
                        <td className="px-4 py-2">
                            <ButtonComponent disabled={isSubmitting}>{taskID ? "Save" : "Add"}</ButtonComponent>
                        </td>
                    </tr>
                </tbody>
            </table>

            <GridComponent className="e-custom-control" dataSource={optimisticState} rowSelected={rowSelected}>
                <ColumnsDirective>
                    <ColumnDirective field="id" headerText="Task ID" width="120" isPrimaryKey />
                    <ColumnDirective field="task" headerText="Task Name" width="150" />
                    <ColumnDirective field="status" headerText="Status" width="120" />
                </ColumnsDirective>
            </GridComponent>
        </form>
    );
}

Client-side features

Here are the essential client-side features that power the application:

Optimistic UI with React 19: useOptimistic instantly updates the grid with temporary data while the server action completes.
Reliable form handling: useFormState integrates seamlessly with server actions for predictable updates.
Rich data interaction: Syncfusion Data Grid supports row selection, inline updates, and structured rendering.
User-friendly UX: Users can add or edit tasks without waiting for server confirmation.

const [optimisticState, addOptimistic] = useOptimistic<Task[], Task>(
    state,
    (prevState, newTask) => {
        const existingTaskIndex = prevState.findIndex(task => task.id === newTask.id);
        if (existingTaskIndex !== -1) {
            return prevState.map(task =>
                task.id === newTask.id
                    ? { ...task, ...newTask }
                    : task
                );
        } else {
            return [...prevState, newTask];
        }
    }
);

Server-side implementation

The server-side logic, marked with the "use server" directive, handles form submissions, task updates, and data retrieval. It powers optimistic UI on the client by returning the updated task list after each mutation.

action.ts

'use server';
import { Task } from "./components/TodoAppComponent";

let tasks: Task[] = [
    { id: 1, task: "Scrum Meeting", status: "Pending" },
    { id: 2, task: "Sprint Planning", status: "Pending" },
    { id: 3, task: "ES Portal Review", status: "Pending" }
];

export async function getTasks(): Promise<Task[]> {
    await new Promise(resolve => setTimeout(resolve, 500));
    return tasks;
}

export async function submitTask(prev: Task[], formData: FormData): Promise<Task[]> {
    await new Promise((r) => setTimeout(r, 2000));

    const rawTaskId = formData.get("id");
    const task = formData.get("task") as string;
    const status = formData.get("status") as string;
    const taskId = rawTaskId ? Number(rawTaskId) : null;

    if (rawTaskId !== '') {
        return prev.map(taskItem =>
            taskItem.id === taskId
            ? { ...taskItem, task, status }
            : taskItem
        );
    } else {
        const newTask: Task = {
              id: (Number(prev[prev.length - 1].id) + 1) as number, task, status,
        };
        const updatedData = prev.filter(task => task.id !== newTask.id);
        return [...updatedData, newTask];
    }
}

Note: The condition if (rawTaskId && rawTaskId !== "") explicitly checks for a provided ID. This is a bit clearer than relying only on taskId truthiness and avoids treating 0 (if ever used) as falsy.

Key server-side features

The server-side layer is responsible for data orchestration, consistency, and reliability. It works in tandem with the client’s optimistic UI to provide instant feedback while maintaining authoritative state control.

"use server" directive: Guarantees that all data-processing logic runs exclusively on the server. This aligns with Next.js best practices and ensures secure, scalable execution.
Shared task type: Imports the Task type directly from the client to enforce type consistency across boundaries, minimizing mismatches and preventing runtime errors.
Server-side data initialization: Task data is initialized and fetched on the server, then injected into the client-rendered Syncfusion Data Grid for immediate display.
Task updates: When a task ID is provided, the submitTask() action updates the corresponding task’s name and status fields in a predictable, immutable manner.
Task creation with reliable IDs: New tasks receive a deterministic, incremental ID by incrementing the last task’s ID. A precautionary filter removes any potential duplicates before insertion, ensuring data integrity.
Improved ID strategy: Unlike random ID generation, which risks collisions, incremental IDs offer reliability, predictability, and easier debugging.

Why use a Data Grid for optimistic UI workflows?

Optimistic UI becomes more complex as applications grow. Using a structured Data Grid helps manage that complexity effectively.

Handles frequent state updates without UI glitches.
Maintains consistency between optimistic and server-confirmed data.
Supports editing, selection, and real-time updates out of the box.
Scales better than manual table implementations.

This makes Data Grid components especially valuable for business and enterprise applications.

Integration workflow

On the front end:

Users submit a task, triggering an optimistic update.
The grid updates instantly with a temporary “Saving…” entry.
Server logic processes the update asynchronously.
The UI syncs automatically once the server responds.

This pattern ensures fast feedback without sacrificing data integrity. Here’s the feature demonstrated visually:

Adding a task

Updating a task

GitHub reference

You can download the complete application from the GitHub repository.

Conclusion

Thank you for reading! React 19’s optimistic UI support makes it easier than ever to build fast, responsive applications that feel instant to users. By combining useOptimistic, useFormState, Next.js server actions, and Syncfusion React Data Grid, you can create scalable task-based applications with seamless client–server synchronization.

If you’re building modern React applications that require real-time feedback and structured data handling, this approach provides a strong foundation.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can try a free 30-day trial.

For questions, reach out through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Create, Edit, and Sign PDFs in JavaScript – No Backend Required

Zahra Sandra Nasaka — Thu, 22 Jan 2026 15:21:32 +0000

TL;DR: In the 2025 Volume 4 release, Syncfusion introduced a JavaScript PDF Library for fully client-side applications. The library allows you to create, read, edit, sign, and manage PDF documents programmatically entirely in the browser, without a backend. It supports JavaScript, TypeScript, Angular, React, Vue, ASP.NET Core, and ASP.NET MVC platforms, enabling you to generate PDF reports containing formatted text, images, shapes, hyperlinks, and lists.

Generating or editing PDFs in web applications often requires server-side tools or PDF microservices, increasing infrastructure cost and security risk. As part of the 2025 Volume 4 release, Syncfusion^® introduced a JavaScript PDF Library that lets you create, read, edit, and process PDFs entirely in the browser, no server required.

From text and images to annotations, forms, and digital signatures, this library delivers everything you need to build fast, flexible, and secure PDF workflows for modern JavaScript and TypeScript applications. The beta version of the Syncfusion JavaScript PDF package is available on npm.js, making it easy to get started right away.

Why choose a fully client-side JavaScript PDF library?

No backend servers or PDF microservices to maintain
Sensitive documents never leave the user’s browser
Faster PDF generation for SaaS and internal applications
Ideal for finance, healthcare, compliance, and enterprise web apps

Creating PDFs with multiple page settings

The JavaScript PDF library supports both the popular PDF 1.7 (ISO 32000-1) standard and the latest PDF 2.0 (ISO 32000-2). You can create PDF files containing sections with various page settings, including different margins, page sizes, orientations, and even rotations.

This flexibility is essential for generating professional documents such as reports, presentations, and technical manuals. You can easily create multi-page PDF documents from scratch using the Syncfusion JavaScript PDF Library. Choose from standard or custom page sizes and configure page orientation as needed.

Note: For more information, refer to Pages in the JavaScript PDF Library.

Multi-page PDFs in JavaScript PDF Library

Adding text, shapes, and images in PDFs

Beyond static layouts, the library enables you to programmatically draw text, shapes, and images, allowing you to build dynamic, data-rich, and branded documents such as invoices, certificates, dashboards, charts, and marketing one-pagers.

You can draw text, shapes, and images on a PDF using the Syncfusion JavaScript PDF Library. Refer to the Sample for drawing these elements on a PDF page.

Note: Explore the guides for Text in JavaScript PDF Library, Shapes in JavaScript PDF Library, and Images in JavaScript PDF Library.

Drawing text, shapes, and images in JavaScript PDF Library

Unicode and Right-to-Left (RTL) text support

To support global applications, the library offers robust Unicode and RTL text rendering using TrueType font (.ttf).

In right-to-left scripts, text begins on the right side of the page and flows leftward. Common RTL languages include Arabic, Persian, and Urdu. The library also supports bidirectional text, where RTL and LTR content coexist, such as Arabic sentences containing English words or numbers. For example, Arabic text flows right-to-left, while numerals remain left-to-right.

The Syncfusion JavaScript PDF Library supports the following font types:

Standard PDF font (14 built-in fonts)
Chinese, Japanese, and Korean (CJK) fonts

Note: To dive deeper, see RTL Text in JavaScript PDF Library documentation.

Unicode and RTL text in JavaScript PDF Library

Bullets and lists

Creating structured content is simple with built-in support for ordered and unordered lists. Ordered lists can display numbers, alphabetic characters, or Roman numerals, while unordered lists provide multiple built-in bullet styles.

This makes it easy to format instructional content, summaries, and reports within your PDF documents.

Bullets and lists in JavaScript PDF Library

Bookmarks

For better navigation in large or complex documents, the JavaScript PDF Library supports hierarchical bookmarks. These bookmarks provide users with an organized structure and allow them to jump directly to specific pages, chapters, or sections.

As a result, readers can quickly find relevant information, significantly improving the user experience.

Note: For more details, refer to the Bookmarks in JavaScript PDF Library documentation.

Bookmarks in JavaScript PDF Library

Annotations

Annotations play a critical role in document review and collaboration workflows. The Syncfusion JavaScript PDF Library supports a comprehensive set of annotation types, including highlights, underlines, strikethroughs, stamps, comments, free text, ink annotations, and shapes.

Using the JavaScript PDF Library, you can programmatically add rich, interactive annotations to PDF documents directly in the browser. These annotations enable reviewers to highlight important content, add contextual comments, and visually mark up documents, helping teams collaborate more effectively and communicate feedback with greater clarity.

For a complete overview of the annotation model and detailed guidance on when and how to use each annotation type, refer to the Annotation in JavaScript PDF Library documentation.

Annotations in JavaScript PDF Library

Form filling

Interactive forms, commonly known as AcroForms, consist of various fields used to collect and manage user input within PDF documents. With the Syncfusion JavaScript PDF Library, you can programmatically create, modify, populate, and flatten form fields entirely in the browser.

The provided sample demonstrates how to dynamically fill existing form fields and, optionally, flatten them to make the content non‑editable. This approach is ideal for workflows such as data collection, form submission, and final document generation.

For a complete overview of supported form field types and advanced customization options, refer to the Form Fields in the JavaScript PDF Library documentation.

Form filling in JavaScript PDF Library

Hyperlinks

Hyperlinks add interactivity to PDF documents by allowing users to navigate seamlessly to other sections within the document, external web pages, or external files. By incorporating links, you can make PDFs easier to explore and significantly improve the end‑user experience.

Web Navigation

You can add hyperlinks to a PDF to enable navigation to external web pages, allowing users to open URLs directly from the document. The Syncfusion JavaScript PDF Library provides full control over link creation and customization, including supported hyperlink styles and behaviors.

For detailed instructions on adding and configuring web links, refer to the Web navigation in JavaScript PDF Library documentation.

Adding web and document hyperlinks in JavaScript PDFs

Internal document navigation

Interactive internal links are essential for navigating between different pages or sections within a PDF, especially in long or structured documents. With the Syncfusion JavaScript PDF Library, you can easily add document link annotations that allow users to jump to specific locations with a single click.

This functionality is particularly useful for reports, manuals, and reference documents where quick navigation improves usability.

For more details, see the Internal document navigation in JavaScript PDF Library documentation.

Internal document navigation in JavaScript PDF Library

External document navigation

External document navigation enables users to open and navigate to another PDF or an external file directly from the current document. This feature is useful for linking related documents, attachments, or supplementary resources.

For implementation details and supported options, refer to the External document navigation in JavaScript PDF Library documentation.

Digital signing PDFs in JavaScript

The PDF Library supports creating, validating, and managing digital signatures in PDF documents, ensuring authenticity, integrity, and security. You can add digital signatures using X.509 certificates ( .pfx files with private keys) and customize appearance, digest algorithms, and cryptography standards.

The included sample demonstrates how to digitally sign a PDF document programmatically using the Syncfusion JavaScript PDF Library.

Note: Refer to the Digital Signature in JavaScript PDF Library.

Digital signatures in JavaScript PDF Library

Extracting text and images from PDFs

The Syncfusion JavaScript PDF Library provides efficient tools for extracting text and images from PDF documents. You can retrieve text for indexing, searching, or analytics and extract embedded images directly in the browser.

Note: Refer to Text Extraction in JavaScript PDF Library and Image Extraction in TypeScript PDF Library.

Text Extraction in JavaScript PDF Library

Image Extraction in TypeScript PDF Library

Redaction

Redaction allows you to permanently remove sensitive or confidential information from PDF documents while preserving the overall structure and integrity of the file. This is a critical feature for meeting privacy and compliance requirements, including regulations such as GDPR.

Using the Syncfusion JavaScript PDF Library, you can programmatically redact content to ensure protected information cannot be recovered or viewed.

For more details, refer to Redaction in JavaScript PDF Library documentation.

Redaction in JavaScript PDF Library

Create or generate PDF files in TypeScript

This section demonstrates how to create a simple yet visually rich PDF document using the Syncfusion JavaScript PDF Library in a TypeScript application. This example demonstrates how to render text, shapes, images, and hyperlinks, and then export the result as a downloadable PDF file directly from the browser.

Installing the Syncfusion TypeScript PDF package

All Syncfusion Essential JS 2 packages are published in the npmjs.com registry, making them easy to install and manage.

To install the Syncfusion JavaScript PDF library, run the following command:

npm install @syncfusion/ej2-pdf --save

Optional: Image and data extraction Support

If your application requires text and image extraction features, install the additional data extraction package:

npm install @syncfusion/ej2-pdf-data-extract --save

After installation, place an ej2-pdf-lib folder alongside your built static assets (for example, in the public or dist directory). This folder must contain all required .js and .wasm files.

Next, ensure that your server is configured to serve .wasm files with the following MIME type:

Content-Type: application/wasm

Note: These additional steps are required only for text and image extraction features. They are not necessary for basic PDF creation.

Dependencies

The following dependencies are required to use the TypeScript PDF Library in your application:

|-- @syncfusion/ej2-compression

|-- @syncfusion/ej2-base

Create a PDF document using TypeScript

The following steps walk you through creating and downloading a PDF document from a TypeScript application.

Step 1: Add a Button in index.html

Begin by adding a button to your index.html file. This button acts as the trigger that initiates PDF generation using the Syncfusion TypeScript PDF API when clicked from the browser.

<html>
    <head>
        <title> Button onclick Example </title>
    </head>
    <body>
        <button id =”normalButton”> Create PDF document </button>
    </body>
</html>

Step 2: Import the required PDF namespaces

Next, open the index.ts file and import the necessary classes from the Syncfusion PDF package. These namespaces provide APIs for programmatically creating, designing, and exporting a PDF document.

import {
    PdfDocument,
    PdfPageSettings,
    PdfMargins,
    PdfPage,
    PdfGraphics,
    PdfBrush,
    PdfPen,
    PdfFont,
    PdfFontFamily,
    PdfFontStyle,
    PdfTextWebLinkAnnotation
} from '@syncfusion/ej2-pdf';

Step 3: Handle Button click and generate the PDF

Now, attach a click event handler to the button. When the user clicks Create PDF document, a new PDF file is created, populated with graphics, text, shapes, and annotations, and then downloaded to the browser.

Add the following code inside your button click handler:

button.element.onclick = (): void => {
    // Create a new PDF document
    let pdf: PdfDocument = new PdfDocument();
    let settings: PdfPageSettings = new PdfPageSettings({
        margins: new PdfMargins(0)
    });

    // Add a new page
    let page: PdfPage = pdf.addPage(settings);
    let g: PdfGraphics = page.graphics;

    // PDF brushes with different colors
    let gray: PdfBrush = new PdfBrush({ r: 64, g: 64, b: 64 });
    let black: PdfBrush = new PdfBrush({ r: 0, g: 0, b: 0 });
    let white: PdfBrush = new PdfBrush({ r: 255, g: 255, b: 255 });
    let violet: PdfBrush = new PdfBrush({ r: 255, g: 153, b: 255 });

    // Pens for lines
    let redPen: PdfPen = new PdfPen({ r: 255, g: 0, b: 0 }, 2);
    let violetPen: PdfPen = new PdfPen({ r: 148, g: 0, b: 211 }, 2);
    let greenPen: PdfPen = new PdfPen({ r: 0, g: 128, b: 0 }, 2);
    let bluePen: PdfPen = new PdfPen({ r: 0, g: 0, b: 255 }, 2);

    // Draw rectangles and text
    g.drawRectangle(
        { x: 0, y: 0, width: g.clientSize.width, height: g.clientSize.height },
        gray
    );
    g.drawRectangle(
        { x: 0, y: 0, width: g.clientSize.width, height: 130 },
        black
    );
    g.drawRectangle(
        { x: 0, y: 400, width: g.clientSize.width, height: g.clientSize.height - 450 },
        white
    );

    let headerFont: PdfFont = pdf.embedFont(
        PdfFontFamily.timesRoman,
        35,
        PdfFontStyle.regular
    );
    g.drawString(
        'Enterprise',
        headerFont,
        { x: 10, y: 20, width: 150, height: 200 },
        violet
    );

    g.drawRectangle(
        { x: 10, y: 63, width: 140, height: 35 },
        violet
    );

    let subHeadingFont: PdfFont = pdf.embedFont(
        PdfFontFamily.timesRoman,
        16,
        PdfFontStyle.regular
    );
    g.drawString(
        'Reporting Solutions',
        subHeadingFont,
        { x: 15, y: 70, width: 130, height: 200 },
        black
    );

    let yPos: number = 30;

    // Header points
    let bodyFont: PdfFont = pdf.embedFont(
        PdfFontFamily.timesRoman,
        11,
        PdfFontStyle.regular
    );
    let bulletHeaderFont: PdfFont = pdf.embedFont(
        PdfFontFamily.zapfDingbats,
        10,
        PdfFontStyle.regular
    );

    yPos = drawHeaderPoint(
        g,
        'Develop cloud-ready reporting applications in as little as 20% of the time.',
        yPos,
        bulletHeaderFont,
        bodyFont,
        white,
        violet
    );
    yPos = drawHeaderPoint(
        g,
        'Proven, reliable platform thousands of users over the past 10 years.',
        yPos,
        bulletHeaderFont,
        bodyFont,
        white,
        violet
    );
    yPos = drawHeaderPoint(
        g,
        'Microsoft Excel, Word, Adobe PDF, RDL display and editing.',
        yPos,
        bulletHeaderFont,
        bodyFont,
        white,
        violet
    );
    yPos = drawHeaderPoint(
        g,
        'Why start from scratch? Rely on our dependable solution frameworks',
        yPos,
        bulletHeaderFont,
        bodyFont,
        white,
        violet
    );

    // Body content
    yPos += 105;

    let bulletBodyFont: PdfFont = pdf.embedFont(
        PdfFontFamily.zapfDingbats,
        16,
        PdfFontStyle.regular
    );
    let bodyContentFont: PdfFont = pdf.embedFont(
        PdfFontFamily.timesRoman,
        17,
        PdfFontStyle.regular
    );

    yPos = drawBodyContent(g, 'Deployment-ready framework tailored to your needs.', yPos, bulletBodyFont, bodyContentFont, white, violet);
    yPos = drawBodyContent(g, 'Our architects and developers have years of reporting experience.', yPos, bulletBodyFont, bodyContentFont, white, violet);
    yPos = drawBodyContent(g, 'Solutions available for web, desktop, and mobile applications.', yPos, bulletBodyFont, bodyContentFont, white, violet);
    yPos = drawBodyContent(g, 'Backed by our end-to-end product maintenance infrastructure.', yPos, bulletBodyFont, bodyContentFont, white, violet);
    yPos = drawBodyContent(g, 'The quickest path from concept to delivery.', yPos, bulletBodyFont, bodyContentFont, white, violet);

    let headerBulletsXposition: number = 45;
    yPos = 350;

    // Section 1: The Experts
    let titleFont: PdfFont = pdf.embedFont(
        PdfFontFamily.timesRoman,
        20,
        PdfFontStyle.regular
    );

    g.drawLine(
        redPen,
        { x: headerBulletsXposition, y: yPos + 92 },
        { x: headerBulletsXposition, y: yPos + 145 }
    );
    g.drawString(
        'The Experts',
        titleFont,
        { x: headerBulletsXposition + 10, y: yPos + 90, width: 150, height: 200 },
        black
    );

    g.drawLine(
        violetPen,
        { x: headerBulletsXposition + 280, y: yPos + 92 },
        { x: headerBulletsXposition + 280, y: yPos + 145 }
    );
    g.drawString(
        'Accurate Estimates',
        titleFont,
        { x: headerBulletsXposition + 290, y: yPos + 90, width: 300, height: 200 },
        black
    );

    g.drawString(
        'A substantial number of .NET reporting applications use our frameworks',
        bodyFont,
        { x: headerBulletsXposition + 10, y: yPos + 115, width: 250, height: 200 },
        black
    );
    g.drawString(
        'Given our expertise, you can expect estimates to be accurate.',
        bodyFont,
        { x: headerBulletsXposition + 290, y: yPos + 115, width: 250, height: 200 },
        black
    );

    // Section 2: Product Licensing
    yPos += 200;

    g.drawLine(
        greenPen,
        { x: headerBulletsXposition, y: yPos + 32 },
        { x: headerBulletsXposition, y: yPos + 85 }
    );
    g.drawString(
        'Product Licensing',
        titleFont,
        { x: headerBulletsXposition + 10, y: yPos + 30, width: 250, height: 200 },
        black
    );

    g.drawLine(
        bluePen,
        { x: headerBulletsXposition + 280, y: yPos + 32 },
        { x: headerBulletsXposition + 280, y: yPos + 85 }
    );
    g.drawString(
        'About Syncfusion',
        titleFont,
        { x: headerBulletsXposition + 290, y: yPos + 30, width: 250, height: 200 },
        black
    );

    g.drawString(
        'Solution packages can be combined with product licensing for great cost savings.',
        bodyFont,
        { x: headerBulletsXposition + 10, y: yPos + 55, width: 250, height: 200 },
        black
    );
    g.drawString(
        'Syncfusion has more than 7,000 customers including large financial institutions and Fortune 100 companies.',
        bodyFont,
        { x: headerBulletsXposition + 290, y: yPos + 55, width: 250, height: 200 },
        black
    );

    // Footer
    let footerFont: PdfFont = pdf.embedFont(
        PdfFontFamily.timesRoman,
        8,
        PdfFontStyle.italic
    );
    g.drawString(
        'All trademarks mentioned belong to their owners.',
        footerFont,
        { x: 10, y: g.clientSize.height - 30, width: 250, height: 200 },
        white
    );

    let annot: PdfTextWebLinkAnnotation = new PdfTextWebLinkAnnotation(
        { x: g.clientSize.width - 100, y: g.clientSize.height - 30, width: 70, height: 10 },
        { r: 255, g: 255, b: 255 },
        null,
        0,
        { text: 'www.syncfusion.com', font: footerFont, url: 'http://www.syncfusion.com' }
    );
    page.annotations.add(annot);

    // Save the PDF
    pdf.save('Sample.pdf');
    pdf.destroy();
};

Step 4: Add helper methods for header and body content

Create reusable helper functions to draw bullet-style header points and body text consistently throughout the document.

function drawHeaderPoint(
    g: PdfGraphics,
    text: string,
    y: number,
    bulletFont: PdfFont,
    bodyFont: PdfFont,
    white: PdfBrush,
    violet: PdfBrush
) {
    g.drawString('l', bulletFont, { x: 220, y: y, width: 100, height: 100 }, violet);
    g.drawString(text, bodyFont, { x: 240, y: y, width: 400, height: 100 }, white);
    return y + 15; // Move down for next header
}

function drawBodyContent(
    g: PdfGraphics,
    text: string,
    y: number,
    bulletBodyFont: PdfFont,
    bodyContentFont: PdfFont,
    white: PdfBrush,
    violet: PdfBrush
) {
    g.drawString('3', bulletBodyFont, { x: 35, y: y, width: 100, height: 100 }, violet);
    g.drawString(text, bodyContentFont, { x: 60, y: y, width: 500, height: 100 }, white);
    return y + 25; // Move down for next body content
}

Step 5: Run the Application

The quickstart project is already configured to compile and run in the browser. Use the following command to launch the application:

npm start

When you click the Create PDF document button, a fully formatted PDF file named Sample.pdf is generated and downloaded automatically.

Creating PDF files in TypeScript using the JavaScript PDF Library

The sample shows how to create a PDF document programmatically using Syncfusion JavaScript PDF library.

Frequently Asked Questions

Can I use EJ2 PDF and Pure React together?

Yes! As EJ2 PDF is non-UI JavaScript library, We can easily integrate it with Pure React components. Check the documentation for more insights. https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/create-pdf-document-react.

Is EJ2 PDF compactable with fully client based web application?

Yes! EJ2 PDF is native JavaScript library, no servers required to use it. It is fully compactable with fully client based web applications.

What platforms and frameworks are supported by EJ2 PDF?

EJ2 PDF supports a wide range of platforms and frameworks, including TypeScript, JavaScript, Angular, React, Vue, ASP.NET Core, and ASP.NET MVC, enabling seamless integration across both front‑end and server‑side applications.

What can I do with the EJ2 PDF library?

EJ2 PDF allows you to programmatically read, create, and manipulate PDF documents, including adding content, modifying existing PDFs, and applying advanced PDF features within your applications.

Do I need Adobe Acrobat to use EJ2 PDF?

No. EJ2 PDF operates independently of Adobe Acrobat, enabling complete PDF processing through code without relying on any external PDF tools.

Is EJ2 PDF suitable for advanced PDF workflows?

Yes. EJ2 PDF provides advanced PDF capabilities that can be seamlessly embedded into applications, making it suitable for enterprise‑grade and complex PDF processing workflows.

Conclusion

In this blog, we explored how to create, edit, sign, and manage PDFs entirely in the browser using the JavaScript PDF Library introduced in the 2025 Volume 4 release. By following the provided examples, you can build secure, high-performance, client-side PDF workflows without relying on backend services.

We encourage you to explore the library’s documentation to discover more features that can help you create and manipulate PDFs effectively.

To learn more, explore the complete list of enhancements in the 2025 Volume 4 Release Notes and What’s New pages.

If you’re already a Syncfusion user, download the latest version of Essential Studio from the license and downloads page. New users can start with a 30-day free trial to explore all our components and capabilities.

If you have any questions or need assistance, feel free to contact us through our support forum, support portal, or feedback portal. We are always here to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

What’s new in Next.js 16: Turbo Builds, Smart Caching, AI Debugging

Zahra Sandra Nasaka — Tue, 20 Jan 2026 15:47:37 +0000

TL;DR: Next.js 16 stabilizes Turbopack for 2–5× faster builds, introduces Cache Components for hybrid static/dynamic rendering, adds AI debugging via MCP in DevTools, and ships with the new React Compiler, routing improvements, and breaking changes like Node.js 20+ requirements, ideal for boosting developer efficiency.

Next.js 16 is a major update that aims to improve both developer productivity and application performance. It’s especially important in 2026 because many previously experimental features have now matured into a stable, performance‑first architecture capable of supporting complex modern web demands. With Turbopack as the default bundler and a more explicit caching model, you can expect faster builds, more consistent behavior, and improved reliability across environments.

In this guide, we’ll walk through what’s new in Next.js 16 and how you can use these features to streamline your development workflow.

Turbopack: The rust-based bundler

Turbopack is now the stable, high-performance successor to Webpack. Built in Rust, it focuses on optimizing build speeds and development responsiveness. As of Next.js 16, it becomes the default bundler for all new projects, offering near‑instant feedback during local development and substantially faster production pipelines.

Here are the key improvements Turbopack brings:

10x faster fast refresh: Code updates appear almost instantly in the browser, helping maintain developer flow.
2x to 5x faster production builds: This greatly reduces CI/CD bottlenecks.
Filesystem caching: Compiled artifacts are stored on disk to speed up repeated runs.

To enable file system caching for even faster development restarts, add the following code to your next.config.ts:

typescript
import type { NextConfig } from "next";

const nextConfig = {
    experimental: {
        turbopackFileSystemCacheForDev: true,
    },
};

export default nextConfig;

If you prefer to continue using Webpack, you can switch back using commands such as next dev --webpack or by setting turbopack: false in your configuration.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    turbopack: false,
};

export default nextConfig;

Next.js 16 Turbopack

Cache components: Explicit performance control

Cache components introduce a new explicit, opt-in caching model powered by the use cache directive. Unlike the older implicit caching system, this model gives developers fine‑grained control over exactly what gets cached and for how long. As a result, dynamic code now executes at request time by default, unless you deliberately mark it for caching, making application behavior more predictable and easier to reason about.

Installation

To enable Cache Components in your project, follow these steps:

Step 1: Open the configuration file

Locate and open your next.config.ts file in the project root.

Step 2: Enable Cache components

Add the property cacheComponents: true to your configuration object. Here’s how you can do it in code:

typescript
const nextConfig = {
    cacheComponents: true,
};

export default nextConfig;

Step 3: Add the use cache directive

Apply the use cache directive at the top of functions or components you wish to cache.

Add this to your project:

 // File level - When used at the file level, all function exports must be async functions.
'use cache'

export default async function Page() {
    // ...
}

// Component level
export async function MyComponent() {
    'use cache'
    return <></>
}

// Function level
export async function getData() {
    'use cache'
    const data = await fetch('/api/data')
    return data
}

Next.js 16 enhanced caching APIs for better control. Enhanced APIs include:

revalidateTag(tag, profile): Uses required cacheLife profiles, such as ‘hours,’ to fine-tune stale-while-revalidate timing.
updateTag(tag): Immediately refreshes cache data inside Server Actions.
refresh(): Re-fetches uncached data without invalidating any existing cache entries.

These additions make caching more intentional, maintainable, and predictable, especially in dynamic, data‑heavy applications.

Next.js DevTools MCP: AI-assisted debugging

The Model Context Protocol (MCP) integration enables Next.js DevTools to share detailed application context with AI coding assistants. This provides AI agents with a deep understanding of your app’s routing, caching, and rendering behavior, enabling them to analyze issues more accurately and provide more useful guidance during development.

Key features

Context-aware insights: AI agents can access unified browser and server logs without context switching.
Automatic error access: Agents receive detailed stack traces and active route data automatically.
Fix suggestions: AI can suggest specific code corrections based on real-time application metadata. AI‑Powered Debugging with Next.js DevTools MCP

Other notable features and improvements

React compiler support

Next.js 16 includes full support for the React Compiler, a now stable build-time optimization tool. The compiler automatically optimizes your code by memorizing components and hooks. This eliminates the need for manual performance optimizations like useMemo and useCallback, reducing code complexity while preventing unnecessary re-renders.

To enable it, refer to the code below.

typescript
export const config = {
    reactCompiler: true,
};

Enhanced routing

Routing performance receives significant improvements in Next.js 16, offering faster navigation and reduced network overhead. These gains are driven by two major enhancements.

First, layout deduplication ensures that shared layouts are downloaded only once during prefetching, preventing redundant network requests. Additionally, incremental prefetching retrieves only the segments that have not already been cached, resulting in more efficient data loading.

Together, these features create a smoother and more responsive routing experience. The following sequence diagram illustrates these enhancements in action, showing how Next.js 16 optimizes the routing process by:

Initial prefetch (/settings): The client checks the cache for the shared layout. If missing, it requests and stores it, then fetches only uncached unique segments, showing incremental behavior.
Subsequent prefetch (/profile): Reuses the cached layout (deduplication, no re-download), and again requests only uncached segments, highlighting efficiency and no redundant data. Sequence diagram illustrating layout deduplication and incremental prefetching in Next.js 16 enhanced routing

Proxy.ts replaces middleware.ts

Next.js 16 replaces the former middleware.ts file with the new Node.js-native alternative Proxy.ts. This update clarifies where request interception occurs and makes the network boundary of your application more explicit. Importantly, the core logic handling redirects and authentication remains unchanged.

Here is an example migration:

typescript
// Old: middleware.ts
    export function middleware(req) { ... }

// New: proxy.ts
export function proxy(req) { ... }

Logging enhancements

Next.js 16 includes refined logging output to provide more visibility into performance:

Dev logs now break down compile and render times.
Build logs display step-by-step timings.

Next.js 16 (Turbopack)

 ✓ Compiled successfully in 615ms
 ✓ Finished TypeScript in 1114ms
 ✓ Collecting page data in 208ms
 ✓ Generating static pages in 239ms
 ✓ Finalizing page optimization in 5ms

Simplified project setup

create-next-app now defaults to a modern best‑practice stack, including:

App Router.
TypeScript.
Tailwind CSS.
ESLint.

This makes new projects more consistent and production-ready out of the box.

Build adapters API (Alpha)

Next.js 16 introduces a new Build Adapters API, enabling developers to customize builds for specific hosting platforms. This is currently available through the experimental.adapterPath option.

React 19.2 features

Includes View Transitions for smooth animations, useEffectEvent for non-reactive effects, and the Activity component.

Breaking changes and upgrade guide

Next.js 16 includes several breaking changes to modernize the framework:

Requirements: Node.js 20.9+, TypeScript 5.1+; drops Node.js 18 support.
Removals: AMP, next lint, runtime configs, various experimental flags.
Async a ccess: Params, searchParams, cookies, etc., must now be awaited.
Deprecations: middleware.ts, images.domains.

To upgrade

To upgrade to the latest version of Next.js, run the following command.

bash
npx @next/codemod@canary upgrade latest
npm install next@latest react@latest react-dom@latest

Conclusion

Thank you for reading! Next.js 16 provides a reliable and future-ready foundation for web development in 2026 by focusing on explicit control and high performance. By adopting Turbopack for speed, Cache Components for clarity, and the React Compiler for efficiency, you can build applications that are both easier to maintain and faster for your users. These tools represent the current gold standard for full-stack React development, offering the stability required for professional, large-scale projects.

If you have any questions, contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

This article was originally published at Syncfusion.com.

What’s the Best Way to Import Excel and CSV Files into a React App?

Zahra Sandra Nasaka — Mon, 19 Jan 2026 14:52:23 +0000

TL;DR: Importing Excel or CSV files into React can be challenging, especially if you want to keep formatting intact and avoid data loss. Manual parsing is slow, complex, and prone to errors. The Syncfusion React Spreadsheet component solves this problem with built‑in support for importing Excel and CSV files. It allows you to upload, open, and render files with just a few lines of code, delivering accurate data handling and an effortless user experience.

Importing Excel or CSV files into a React application sounds simple until formatting breaks, formulas disappear, or large files slow everything down. Many teams start with manual parsing or table-based rendering, only to realize they’re rebuilding spreadsheet behavior from scratch.

A dedicated React Spreadsheet component changes that equation. Instead of treating Excel and CSV files as raw data, you can open them as fully interactive spreadsheets with styles, formulas, and structure preserved.

In this article, we’ll look at how Syncfusion React Spreadsheet file import actually works, why server-side processing matters, and two practical ways to open Excel or CSV files in React without fragile parsing logic.

Key features for efficient React Spreadsheet file import

The Syncfusion React Spreadsheet offers several features that make file handling smooth and reliable:

Support for Excel ( .xlsx, .xls, .xlsm, .xlsb ) and CSV formats.
Ability to upload and open files directly in the React UI.
Interactive grid with formulas, styles, and formatting.
Easy integration with React workflows and optional server-side processing.

How file imports work in React Spreadsheet

The React Spreadsheet component utilizes server-side processing to reliably import Excel and CSV files, preserving formatting and data integrity. This is made possible through the Syncfusion.EJ2.Spreadsheet server library, available for both ASP.NET Core and ASP.NET MVC apps.

To understand how everything fits together, here’s a breakdown of the import workflow:

1. Upload

When a user selects a file, it is automatically sent to the server for processing. This ensures the browser doesn’t have to handle heavy parsing tasks.

2. Processing

On the server, the Spreadsheet library uses Syncfusion XlsIO to read and extract the file’s content.

It converts all data cells, styles, formulas, and formatting into a Spreadsheet‑compatible JSON workbook that the React component can interpret.

3. Render

Once processed, the JSON workbook is returned to the client. The React Spreadsheet component then renders the imported content directly in the browser with full fidelity.

Note: All processing happens in memory during the request cycle. No file data is stored on the server, ensuring both performance and security.

How to enable file import in your React app

Before enabling file import, make sure your Spreadsheet app is properly set up by following the getting started guide.

To activate file import functionality, you’ll need to configure a few key settings:

Ensure the allowOpen property is enabled (it’s set to true by default).
Set the openUrl property to your backend API endpoint.
If you’re hosting your own backend, refer to the local service setup guide for proper configuration.

With the basics in place, let’s explore two ways to import Excel or CSV files into the React Spreadsheet component.

Option 1: Import files using the Ribbon UI

The Syncfusion React Spreadsheet comes with a built-in Ribbon UI that provides an interface similar to Microsoft Excel. This makes it easy for users to navigate file operations using a familiar layout.

How it works

When the user selects File -> Open from the Ribbon:

The browser opens the system file explorer for file selection.
The selected file is uploaded to the server via the configured openUrl.
The server processes the file and returns a JSON workbook, which is rendered in the spreadsheet component.

Best for: Users who want a simple, Excel-like experience without custom upload controls.

Importing Excel or CSV files in React Spreadsheet

Option 2: Import files using the open method

If your app needs custom workflows, such as integrating with custom UI elements or automating imports, you can use the open method.

Workflow

Use the Syncfusion React File Uploader to select an Excel or CSV file.
Once the upload completes, the File Uploader triggers the success event.
Inside this event, pass the raw file object to the Spreadsheet’s open method, which processes and uploads the file.

Best for: Custom UI, drag-and-drop, or button-triggered imports.

Refer to the following code example.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  const spreadsheetRef = React.useRef(null);
  const uploaderRef = React.useRef(null);

  const asyncSettings = {
    saveUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Save',
    removeUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
  };

  const allowedExtensions = '.xlsx, .xls, .csv';

  const onSuccess = (args) => {
    if (args.operation == 'upload')
      spreadsheetRef.current.open({ file: args.file.rawFile });
  };

  return (
    <div>
      <UploaderComponent
        ref={uploaderRef}
        asyncSettings={asyncSettings}
        success={onSuccess}
        allowedExtensions={allowedExtensions}
      ></UploaderComponent>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        openUrl="https://services.syncfusion.com/react/production/api/spreadsheet/open"
      />
    </div>
  );
}
export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Alos, refer to the above code example on Stackblitz.

Importing a file using the open method in React Spreadsheet

For more detailed guidance on opening Excel files with the React File Uploader, consult the official user guide.

Other import options

The React Spreadsheet component supports multiple ways to open files, including local storage, external URLs, and Blob data. For advanced scenarios, refer to the resources below.

Events for file imports

The Syncfusion React Spreadsheet provides event hooks that allow you to customize and respond to file import operations. These events are useful for adding validations, modifying request behavior, or triggering UI updates:

The available events are:

beforeOpen: Triggered before the file is opened. We can use this to:

Modify request parameters before sending them to the server (e.g., add custom headers, such as authorization tokens).
Define parsing options that control how the Excel or CSV file is loaded.
Cancel the operation based on file type or content for security or validation purposes.

2. OpenComplete: Triggered after the file is successfully opened. This event is helpful for:
Displaying a success message or notification.
Enabling additional UI controls or features.
Performing updates in the spreadsheet, such as changing the active sheet, applying conditional formatting, or initializing custom logic.

For complete details on opening and saving files, check out the official guide.

Frequently Asked Questions

1. What is the Syncfusion React Spreadsheet component?

It’s a powerful UI component for React that allows you to view, edit, and manage spreadsheet data. It supports importing Excel ( .xlsx, .xls, .xlsm, .xlsb ) and CSV files directly into your React application. You can check out our documentation.

2. Why should I use Syncfusion React Spreadsheet for file imports?

It provides built-in support for Excel and CSV formats, preserves formatting and formulas, and offers easy integration with React workflows, reducing development time.

3. Which file formats are supported for import?

The component supports Microsoft Excel (.xlsx), Excel 97–2003 (.xls), Excel Macro-Enabled (.xlsm), Excel Binary (.xlsb), and CSV (.csv).

4. How does the file import process work?

Upload: The user selects a file, which is sent to the server. Processing: Server uses Syncfusion XlsIO library to convert the file into a Spreadsheet-compatible JSON. Render: JSON is returned to the client and displayed in the React Spreadsheet.

5. What are the ways to import files in React Spreadsheet?

Option 1: Use the Ribbon UI ( File → Open menu ) or Option 2: Use the open method with a custom file uploader for advanced workflows.

6. How do I enable file import in my project?

Set the allowOpen property to true. Configure openUrl with your backend service URL. You can set up your own backend using Syncfusion’s hosting guide.

7. Can I customize the file import process?

Yes, using event hooks like: beforeOpen: Modify request parameters or cancel the operation. openComplete: Trigger UI updates or apply custom logic after successful import.

8. What other import options are available?

You can open files from external URLs, Blob data, Base64 strings, or via custom fetch requests.

9. Can I import Excel files located in cloud storage into the Syncfusion React Spreadsheet?

Yes, you can import Excel or CSV files from cloud storage services like AWS S3, Google Cloud Storage, or Azure Blob Storage. Use your .NET backend service to fetch the file with credentials (e.g., via SDKs ), process it with Syncfusion Open API, and return it to the React client for display. This secures access and preserves data integrity.

10. Can I host the Syncfusion Spreadsheet server for file imports on cloud platforms like Azure App Service or AWS Lambda?

Yes, the backend (powered by Syncfusion XlsIO ) can be deployed to these platforms for scalability. For Azure App Service, deploy your ASP.NET Core service as an App Service; for AWS Lambda, use serverless functions to handle file processing. Create endpoints that accept file uploads and return JSON. This reduces overhead Lambda is ideal for on-demand imports. Syncfusion provides guides for scaling in hosted environments.

11. Is there a Docker image available for easy deployment of the Syncfusion Spreadsheet open server, and how do I use it?

Yes, Syncfusion offers a pre-built Docker image on Docker Hub based on an ASP.NET Core project, which requires no additional .NET code from your side. Pull it with **docker pull syncfusion/spreadsheet-server**, then run with docker run -d -p 6002:8080 --name spreadsheet-container syncfusion/spreadsheet-server. Configure your React app’s openUrl to point to this containerized server for file imports (e.g., for Excel/CSV processing). It’s lightweight, secure, and deployable on any platform supporting Docker, like Kubernetes or AWS ECS.

Conclusion

Thank you for reading! The Syncfusion React Spreadsheet makes importing Excel and CSV files into your React apps effortless and highly customizable. Whether you choose the intuitive Ribbon UI or the versatile open method, you can deliver a smooth, Excel-like experience for your users, complete with preserved formatting and styles.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Automate Task Planning with an AI-Powered Kanban Board in .NET MAUI

Zahra Sandra Nasaka — Fri, 16 Jan 2026 14:30:01 +0000

TL;DR: Manual task planning is slow and repetitive. This guide shows how to build an AI-powered Kanban board in .NET MAUI using Azure OpenAI and Microsoft Extensions to automate task generation and organize workflows visually for faster project planning.

Task planning is a key part of project management, but doing it manually takes time and effort. AI makes this process quick and easy. Users simply describe their project and specify the number of tasks they need. The system will generate relevant tasks and display them on the Kanban board.

In this guide, we’ll show you how to build an AI-powered Kanban board using Syncfusion^®.NET MAUI Kanban control and Azure OpenAI. It covers everything from UI setup to task generation logic, along with practical use cases to show how this approach can simplify and speed up project planning.

Architecture overview

This application is built around three key components:

Syncfusion .NET MAUI Kanban control, which provides an interactive interface for visual task management.
Azure OpenAI service is responsible for generating intelligent and structured task suggestions.
Behavior logic that links user input with AI‑driven responses, ensuring seamless flow and interaction.

Here’s how it works

To begin, users enter a project description and specify the number of tasks they want generated. Based on this input, Azure OpenAI creates structured task cards, which are automatically placed in the In Progress column of the Kanban board.

Meanwhile, the additional workflow columns To Do, Code Review, and Done are predefined to support the task lifecycle. However, they start empty until users update or move tasks through the process.

Build the User Interface

With the architecture in place, the next step is to construct a clean and intuitive user interface. The UI is organized into two primary sections: The AI task generation panel and the Kanban board that displays the generated tasks. Together, they create a smooth workflow that takes users from input to visual task management.

AI smart task suggestion

This section includes,

An Editor for entering project details.
An Entry field for specifying the number of tasks.
A Button to trigger AI‑powered task generation.
A Busy Indicator to show progress.
A Feedback Label to guide the user

Kanban Board

After tasks are generated,

The In Progress column displays AI-generated tasks.
The board is built using Syncfusion’s SfKanban control.
Additional workflow columns ( To-Do, Code Review, Done ) are included for structured.

Here’s how you can do it in code:

<Border 
    Margin="0" 
    Padding="0"
    BackgroundColor="Transparent" 
    HeightRequest="500"
    WidthRequest="{OnPlatform WinUI= 500, MacCatalyst= 500, iOS= 350, Android= 350}"
    VerticalOptions="Center"
    HorizontalOptions="Center">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="16" />
    </Border.StrokeShape>
    <Grid>
        <!-- Overlayed Busy Indicator -->
        <core:SfBusyIndicator x:Name="busyIndicator"
                              AnimationType="Cupertino"
                              IsRunning="False"
                              IsVisible="False"
                              HorizontalOptions="Center"
                              VerticalOptions="Center"
                              HeightRequest="100"
                              WidthRequest="100"/>
        <!-- Main layout stack -->
        <VerticalStackLayout Padding="30" VerticalOptions="Center" Spacing="15">
            <Label Text="AI Smart Task Suggestion" FontSize="24"
                   HorizontalOptions="Center" Padding="0,20,0,20"/>
            <Label Text="Project Details" FontSize="18"
                   HorizontalOptions="Center" Padding="0,10"/>
            <Editor x:Name="projectDetailsEditor"
                    Placeholder="Enter project details"
                    PlaceholderColor="Gray"
                    HeightRequest="50"
                   WidthRequest="{OnPlatform WinUI= 400, MacCatalyst= 400, iOS= 300 , Android= 300}"
                    HorizontalOptions="Center"/>
            <Label Text="Number of tasks" FontSize="18"
                   HorizontalOptions="Center" Padding="0,10"/>
            <Entry x:Name="numberOfTasksEntry"
                   Placeholder="Enter number of tasks"
                   PlaceholderColor="Gray"
                   HeightRequest="50"
                   WidthRequest="{OnPlatform WinUI= 400, MacCatalyst= 400, iOS= 300 , Android= 300}"
                   HorizontalOptions="Center"
                   Keyboard="Numeric"/>
            <buttons:SfButton x:Name="searchButton"
                              Text="Search"
                              CornerRadius="5"
                              FontFamily="MauiSampleFontIcon"
                              FontSize="20"
                              FontAttributes="Bold"
                              WidthRequest="120"
                              HeightRequest="40"
                              Margin="0,5,0,0"
                              HorizontalOptions="Center"/>
            <Label x:Name="infoLabel"
                   Text="Enter project details and number of tasks, then press Search."
                   IsVisible="True"
                   HorizontalOptions="Center"
                   Padding="6"
                   FontSize="16"
                   TextColor="#495057"
                   />
       </VerticalStackLayout>
   </Grid>
</Border>

Kanban Board setup

After the tasks are generated, the app navigates the users to the Kanban board view. This board is created using Syncfusion’s SfKanban control and is structured into four essential workflow columns.

Note: For additional configuration details, refer to the official .NET MAUI Kanban control documentation.

Below is an example of how you can set up the board in your code:

<kanban:SfKanban x:Name="kanban" Grid.Row="1" ColumnWidth="305" AutoGenerateColumns="False" ItemsSource="{Binding Cards}">
    <kanban:KanbanColumn Title="To Do" 
                                 Categories="Open,Postponed" 
                                 MinimumLimit="5" 
                                 MaximumLimit="15" >
        <kanban:KanbanColumn.ErrorBarSettings>
            <kanban:KanbanErrorBarSettings Fill="Green" MinValidationFill="Orange" MaxValidationFill="Red" Height="4"/>
        </kanban:KanbanColumn.ErrorBarSettings>
    </kanban:KanbanColumn>
    <kanban:KanbanColumn Title="In Progress"
                                 Categories="In Progress"
                                 MinimumLimit="3" 
                                 MaximumLimit="8" />
    <kanban:KanbanColumn Title="Code Review"
                                 Categories="Code Review" 
                                 MinimumLimit="5" 
                                 MaximumLimit="10" />
    <kanban:KanbanColumn Title="Done" 
                                 Categories="Closed,Closed No Changes,Won't Fix"
                                 MinimumLimit="8" />
</kanban:SfKanban>

Azure OpenAI integration

To enable AI-powered task generation, the AzureOpenAIBaseService class is responsible for validating credentials and establish communication with Azure OpenAI. Before implementing this service, install the required packages.

Azure.AI.OpenAI,
Azure.Identity,
Microsoft.Extensions.AI.OpenAI.

Once the packages are in place, add the following class to your project:

internal class AzureOpenAIBaseService
{
    #region Fields

    /// <summary>
    /// The Azure OpenAI EndPoint
    /// </summary>
    private const string endpoint = "";

    /// <summary>
    /// The Deployment name
    /// </summary>
    private const string deploymentName = "";

    /// <summary>
    /// The API key
    /// </summary>
    private const string key = "";

    /// <summary>
    /// The OpenAI
    /// </summary>
    private IChatClient? client;

    /// <summary>
    /// The already credential validated field
    /// </summary>
    private bool isAlreadyValidated = false;

    /// <summary>
    /// The chat history
    /// </summary>
    private string? chatHistory;

    #endregion

    internal AzureOpenAIBaseService()
    {
        ValidateCredential();
    }

    #region Properties

    /// <summary>
    /// Gets/Set a value indicating whether credentials are valid or not.
    /// Returns <c>true</c> if the credentials are valid; otherwise, <c>false</c>.
    /// </summary>
    internal bool IsCredentialValid { get; set; }

    #endregion

    #region Methods

    /// <summary>
    /// Validate Azure Credentials
    /// </summary>
    private async void ValidateCredential()
    {
        #region Azure OpenAI
        // Use the below method for Azure OpenAI
        this.GetAzureOpenAIKernal();
        #endregion

        if (isAlreadyValidated)
        {
            return;
        }

        try
        {
            if (client != null)
            {
                await client!.CompleteAsync("Hello, Test Check");
                chatHistory = string.Empty;
                IsCredentialValid = true;
                isAlreadyValidated = true;
            }
        }
        catch (Exception)
        {
            return;
        }
    }
    /// <summary>
    /// To get the Azure OpenAI method
    /// </summary>
    private void GetAzureOpenAIKernal()
    {
        try
        {
            var client = new AzureOpenAIClient(new Uri(endpoint), new AzureKeyCredential(key)).AsChatClient(modelId: deploymentName);
                this.client = client;
        }
        catch (Exception)
        {
        }
    }

    /// <summary>
    /// Gets the AI response.
    /// </summary>
    /// <param name="userPrompt">The prompt.</param>
    /// <returns>The AI response.</returns>
    internal async Task<string> GetAIResponse(string userPrompt)
    {
        if (IsCredentialValid && client != null)
        {
            chatHistory = string.Empty;
            // Add the system message and user message to the options
            chatHistory = chatHistory + "You are a predictive analytics assistant.";
            chatHistory = chatHistory + userPrompt;
            try
            {
                var response = await client.CompleteAsync(chatHistory);
                return response.ToString();
            }
            catch
            {
                return string.Empty;
            }
        }
        return string.Empty;
    }

    #endregion
}

Within the GetDataFormFromAI method, a structured prompt is sent to the Azure OpenAI service requesting task details in JSON format based on the user’s input. The JSON response is then deserialized into Kanban model classes and assigned to the ItemsSource property of the .NET MAUI Kanban control, allowing the AI-generated task to appear instantly in the appropriate column.

/// <summary>
/// Gets data from Azure OpenAI service, validates input, handles result (including navigation and error feedback).
/// </summary>
/// <returns>A task representing the asynchronous operation.</returns>
private async System.Threading.Tasks.Task GetDataFormFromAI()
{
    try
    {
        if (!string.IsNullOrWhiteSpace(projectDetailsEntry?.Text) && !string.IsNullOrWhiteSpace(numberOfTasksEntry?.Text))
        {
            // Stricter project description validation
            var details = projectDetailsEntry.Text.Trim();
            var wordCount = details.Split(' ', StringSplitOptions.RemoveEmptyEntries).Length;

            if (details.Length < 5 || wordCount < 2)
            {
                if (busyIndicator != null) busyIndicator.IsRunning = false;
                if (busyIndicator != null) busyIndicator.IsVisible = false;
                if (button != null) button.IsEnabled = true;
                if (infoLabel != null)
                {
                    infoLabel.Text = "Please enter a meaningful project description (at least 5 characters and 2 words).";
                    infoLabel.TextColor = Color.FromArgb("#d35400");
                    infoLabel.IsVisible = true;
                }
                return;
            }

            string result = string.Empty;
            if (infoLabel != null)
            {
                infoLabel.Text = "Generating tasks...";
                infoLabel.TextColor = Color.FromArgb("#495057");
                infoLabel.IsVisible = true;
             }
             var description = $"Generate {numberOfTasksEntry?.Text} task recommendations for {projectDetailsEntry?.Text}. Each task should include the following fields:\r\n\r\nId (string)\r\nTitle (short string, maximum 3 words)\r\nCategory (string, always set to 'Open')\r\nDescription (string)\r\nColor (string, always set to 'black')\r\nTags (array of strings, with a maximum of 3 tags per task)\r\nReturn the data strictly in JSON array format with all fields correctly typed. No additional text or explanation—only the JSON array.";
             result = await this.azureOpenAIBaseService.GetAIResponse(description);
             string data = result.Replace("```
{% endraw %}
json", "").Replace("
{% raw %}
```", "").Replace("\r", "").Replace("\n", "").Replace("\t", "").Trim();
             var modifiedData = JsonSerializer.Deserialize<ObservableCollection<KanbanModel>>(data);

             if (viewModel != null) viewModel.Cards.Clear();
             if (modifiedData != null && modifiedData.Count > 0 && this.viewModel != null && mainPage != null)
             {
                 //// Assign cards to ViewModel and navigate to KanbanPage
                 var list = new ObservableCollection<KanbanModel>();
                 foreach (var item in modifiedData)
                 {
                     if (item != null && item.Category != null)
                     {
                         var kanbanItem = new KanbanModel();
                         kanbanItem.Category = item.Category.ToString();
                         kanbanItem.ID = item.ID;
                         kanbanItem.Description = item.Description.ToString();
                         kanbanItem.Title = item.Title;
                         kanbanItem.Tags = item.Tags;
                         kanbanItem.IndicatorFill = Colors.Red;
                         list.Add(kanbanItem);
                     }
                 }

                 this.viewModel.Cards = list;
                 if (busyIndicator != null) busyIndicator.IsRunning = false;
                 if (busyIndicator != null) busyIndicator.IsVisible = false;
                 if (button != null) button.IsEnabled = true;
                 if (infoLabel != null) infoLabel.IsVisible = false;
                 // Navigate to KanbanPage
                 await mainPage.Navigation.PushAsync(new KanbanPage(this.viewModel));
             }
             else
             {
                 if (busyIndicator != null) busyIndicator.IsRunning = false;
                 if (busyIndicator != null) busyIndicator.IsVisible = false;
                 if (button != null) button.IsEnabled = true;
                 if (infoLabel != null)
                 {
                     infoLabel.Text = "No tasks found. Please modify your search and try again.";
                     infoLabel.TextColor = Color.FromArgb("#d35400");
                     infoLabel.IsVisible = true;
                 }
             }
         }
         else
         {
             if (busyIndicator != null) busyIndicator.IsRunning = false;
             if (busyIndicator != null) busyIndicator.IsVisible = false;
             if (button != null) button.IsEnabled = true;
             if (infoLabel != null)
             {
                 infoLabel.Text = "Please fill all fields before searching.";
                 infoLabel.TextColor = Color.FromArgb("#d35400");
                 infoLabel.IsVisible = true;
             }
         }
     }
     catch
     {
         if (busyIndicator != null) busyIndicator.IsRunning = false;
         if (busyIndicator != null) busyIndicator.IsVisible = false;
         if (button != null) button.IsEnabled = true;
         if (infoLabel != null)
         {
             infoLabel.Text = "An error occurred. Please try again.";
             infoLabel.TextColor = Color.FromArgb("#d35400");
             infoLabel.IsVisible = true;
         }
     }
 }

See the implementation in action below:

Visualizing an AI-Powered Kanban Board in .NET MAUI

Frequently Asked Questions

1. What is an AI-powered Kanban board in .NET MAUI?

An AI-powered Kanban board in .NET MAUI is a Kanban-style task board where tasks can be generated automatically using AI from a project description, then displayed and managed visually using the Syncfusion SfKanban control.

2.How does Azure OpenAI generate tasks for the Kanban board?

The user enters project details and a task count. The app sends a prompt to Azure OpenAI asking for a strict JSON array containing task fields (Id, Title, Category, Description, Color, Tags). The JSON is then deserialized into Kanban card models and added to the board (initially in “In Progress”).

3.How can I customize the Kanban column width in Syncfusion SfKanban (.NET MAUI)?

You can control column sizing using MinimumColumnWidth and MaximumColumnWidth to set a range, or use ColumnWidth to enforce a fixed width for all columns in SfKanban.

4.How does SfKanban decide which column a card belongs to, and can I change it?

By default, SfKanban categorizes cards using the Category property of KanbanModel. If you want to categorize using a different KanbanModel property, set ColumnMappingPath (for example, mapping by ID).

GitHub reference

You can find the complete implementation on GitHub for AI-Powered Kanban in .NET MAUI.

Conclusion

Thank you for reading! Combining Syncfusion .NET MAUI Kanban control with Azure OpenAI offers developers a smart and efficient way to manage tasks. Automating task generation and organizing them visually simplifies project planning, boosting productivity across platforms, including iOS, Android, Windows, and macOS.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day tria l.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

AI-Powered Smart Paste: A Smarter Way to Fill ASP.NET Core Forms

Zahra Sandra Nasaka — Fri, 16 Jan 2026 14:12:29 +0000

TL;DR: The Smart Paste Button in Syncfusion ASP.NET Core suite, introduced in the 2025 Volume 4 release, brings AI-powered clipboard intelligence to your forms. It analyzes clipboard content, understands context, and pastes data into the right fields with proper formatting.

As developers, we constantly look for ways to streamline workflows and deliver smoother user experiences. Syncfusion already provides a solid suite of ASP.NET Core UI controls, and with the Smart Paste Button, things get even better.

This new control, introduced in the 2025 Volume 4 release, uses AI to understand clipboard content and auto‑fill form fields intelligently, no more manual parsing, reformatting, or validation headaches. In this article, you’ll explore what the Smart Paste Button offers, how it works behind the scenes, and how to add it to your ASP.NET Core application.

In this guide, you’ll learn how to integrate Azure OpenAI (or other AI providers) with the Smart Paste Button to enable seamless auto‑fill in your ASP.NET Core apps.

Why the Smart Paste Button matters

Traditional paste functionality simply dumps raw text into a field, and that’s where the work begins. You still need to clean, format, and map the data.

The Smart Paste Button changes this completely. It uses AI to:

Identify data types like text, numbers, emails, and dates.
Understand the user’s intent.
Map clipboard data to the correct form fields.
Format values automatically based on rules you define.

The result? Faster workflows and a more polished user experience.

Here’s what makes this Smart Paste Button so powerful:

Clipboard integration: Pulls data from the clipboard, reducing the need for manual typing.
Autofill capability: Automatically populates multiple form fields with a single click.
Smart data parsing: Detects structure and formats clipboard content to match form requirements.
Custom rules: Define how different content types should be handled.

How it works

The Smart Paste Button uses AI to analyze the clipboard content and decide where each piece of information belongs. When a user clicks the Smart Paste:

The control scans the form for elements like <input>, <select>, and <textarea>.
It reads their associated <label>, name, id, or nearby text.
It sends descriptive metadata + clipboard data to your configured AI model.
The AI determines the correct field mappings.
The control fills in the values instantly.

This gives users a faster, more accurate paste experience, especially in forms with multiple fields.

Let’s look at the benefits:

Increased efficiency: Automate repetitive formatting and validating work.
Improved accuracy: AI reduces data-entry mistakes and keeps formatting consistent.
Customization: Developers can tailor the component to meet the specific needs of their applications, ensuring that the pasted content adheres to the desired standards and conventions.

Note: The Smart Paste Button inherits all styling and behavior from the existing Syncfusion ASP.NET Core Button control.

Getting started with the ASP.NET Core Smart Paste Button control

You’ve seen what the Smart TextArea can do; now let’s integrate it. In the next section, we’ll walk you through setting it up in your ASP.NET Core application.

Prerequisites:

Before you begin, ensure you’ve installed the following:

.NET 8 SDK or later.
A new or existing ASP.NET Core application.
An OpenAI, Azure OpenAI Account, or Ollama environment.-

Step 1: Create a new ASP.NET Core project

You can use Visual Studio via Microsoft Templates or the Syncfusion ASP.NET Core Extension to scaffold your app.

Step 2: Install Syncfusion ASP.NET Core NuGet in the App

To use the Smart Paste Button in your ASP.NET Core app, install the Syncfusion.EJ2.AspNet.Core NuGet package.

You can do this through Visual Studio:

Open Tools → NuGet Package Manager → manage NuGet Packages for solution.
Search for Syncfusion.EJ2.AspNet.Core.
Install the package into your project.

Step 3: Add Syncfusion ASP.NET Core Tag Helper

Enable Syncfusion Tag Helpers so you can use the Smart Paste Button in your Razor pages.

Open ~/Pages/_ViewImports.cshtml and add:

@addTagHelper *, Syncfusion.EJ2

This globally registers Syncfusion Tag Helpers across all your Razor pages.

Step 4: Add stylesheet and script resources

Next, reference the required Syncfusion CSS and JavaScript files in your layout.

Edit ~/Pages/Shared/_Layout.cshtml and include the following inside the

section:


<head>
    ...
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/32.1.19/fluent.css" />
    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js"></script>
</head>

This ensures the Smart Paste Button and other Syncfusion controls render correctly with the required styles and scripts.

Step 5: Configure AI service

The Smart Paste Button relies on an AI provider to analyze clipboard content. You can integrate OpenAI, Azure OpenAI, or Ollama on your setup. Follow the instructions below to register your preferred AI model in the application.

Option 1: Configure OpenAI

First, create an API key and assign it to openAIApiKey. Then choose the model you want to use such as gpt‑4o or gpt‑4o‑mini, and set it in openAIModel.

Install the following NuGet packages into your project:

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI

To configure the AI service, add the following settings to the ~/Program.cs file in your ASP.NET Core Application:

using Microsoft.Extensions.AI;
using OpenAI;
using Syncfusion.EJ2;

builder.Services.AddRazorPages();

string openAIApiKey = "API-KEY";
string openAIModel = "OPENAI_MODEL";

OpenAIClient openAIClient = new 
OpenAIClient(openAIApiKey);
IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(openAIChatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

var app = builder.Build();
....

Option 2: Configure Azure OpenAI

Before configuring Azure OpenAI, deploy an Azure OpenAI Service resource and model. Then assign the following values:

azureOpenAIKey
azureOpenAIEndpoint
azureOpenAIModel

Install the following NuGet packages into your project:

Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
Install-Package Azure.AI.OpenAI

To configure the AI service, add the following settings to the ~/Program.cs file in your ASP.NET Core Application.

Program.cs:

using Syncfusion.EJ2;
using Microsoft.Extensions.AI;
using Azure.AI.OpenAI;
using System.ClientModel;

builder.Services.AddRazorPages();

string azureOpenAIKey = "AZURE_OPENAI_KEY";
string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
string azureOpenAIModel = "AZURE_OPENAI_MODEL";
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
     new Uri(azureOpenAIEndpoint),
     new ApiKeyCredential(azureOpenAIKey)
);
IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
builder.Services.AddChatClient(azureOpenAIChatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

var app = builder.Build();
....

Option 3: Ollama

To use Ollama for running self-hosted models:

Download and install Ollama Visit Ollama’s official website and install the appropriate application for your operating system.
Install the desired model from the Ollama library You can browse and install models from the Ollama Library (e.g., llama2:13b, mistral:7b, etc.).
Configure your application
- Provide the Endpoint URL where the model is hosted (e.g., http://localhost:11434).
- Set ModelName to the specific model you installed (e.g., llama2:13b).

Install the following Nuget packages into your project:

Install-Package Microsoft.Extensions.AI
Install-Package OllamaSharp

Add the following settings to the ~/Program.cs file in your ASP.NET Core Application:

using Syncfusion.EJ2;
using Microsoft.Extensions.AI;
using OllamaSharp;

builder.Services.AddRazorPages();

string ModelName = "MODEL_NAME";
IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
builder.Services.AddChatClient(chatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

var app = builder.Build();
....

Step 6: Add the ASP.NET Core Smart Paste Button control

Next, add the Syncfusion ASP.NET Core Smart Paste Button tag helper in ~/Pages/Index.cshtml page:


<h1>Contact Form</h1>
<form action="/submit" method="post">
    <div class="mb-2">
        <label for="name" class="form-label">Full Name</label>
        <input type="text" class="form-control" id="name" name="name" required>
    </div>
    <div class="mb-2">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" name="email" required>
    </div>
    …
    <!—Refer to the GitHub sample attached below for complete code examples -->
    …
    <div class="mb-2">
        <label for="country" class="form-label">Country</label>
        <select class="form-select" id="country" name="country">
            <option value="">Select Country</option>
            <option value="United States">United States</option>
            <option value="Canada">Canada</option>
            <option value="United Kingdom">United Kingdom</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
    <ejs-smartpaste id="smartPasteBtn" content="Smart Paste" cssClass="e-primary" iconCss="e-icons e-paste"></ejs-smartpaste>
</form>

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app, copy the sample content and click Smart Paste to see how the form is instantly filled.

ASP.NET Core Smart Paste Button control

Annotation

By default, the Smart Paste Button automatically scans form elements such as <input>, <select>, and <textarea>. It analyzes each field’s <label>, name, id, and any nearby descriptive text to generate a semantic description. These descriptions are sent to the AI model, enabling accurate mapping between clipboard content and form fields.

If you require more control over how the AI interprets a field, you can override the default description using data-smartpaste-description attribute. This allows you to provide custom instructions specific to that field.

Refer to the code example below.

<h1>Contact Form</h1>
<form action="/submit" method="post">
    <div class="mb-2">
        <label for="name" class="form-label">Full Name</label>
        <input type="text" class="form-control" id="name" name="name" required data-smartpaste-description="All characters must be uppercase.">
    </div>
    …
</form>

Now run the app again, copy the s ample content, and click Smart Paste. The AI processes the clipboard data and maps it to the correct form fields. In this example, the Full Name field will apply uppercase formatting based on your custom description.

Here’s a quick demo of the control in action:

ASP.NET Core Smart Paste Button with Annotations

GitHub reference

You can find the complete sample for ASP.NET Core Smart Paste Button on GitHub.

Conclusion

The Syncfusion ASP.NET Core Smart Paste Button is a powerful tool designed to enhance user interaction by simplifying data entry. With its AI capabilities, it transforms the way users paste information, ensuring it’s accurate and contextually relevant. By implementing this control, you can significantly improve productivity and streamline workflows in your applications.

Check out our Release Notes and What’s New pages to see the other updates in this release, and leave your feedback in the comments section below. We would love to hear from you.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Build a Modern Student Enrollment Dashboard Using .NET MAUI Charts

Zahra Sandra Nasaka — Fri, 02 Jan 2026 17:00:35 +0000

TL;DR: Learn how to build a modern, responsive Student Enrollment Dashboard in .NET MAUI using Syncfusion Charts, Gauges, and Inputs. Visualize KPIs like admission count, gender distribution, program breakdown, and regional student mix with interactive charts.

Welcome to our Chart of the Week series!

Universities deal with thousands of rows of enrollment data, but spreadsheets rarely tell the full story. That’s where dashboards shine, turning raw numbers into actionable insights.

In this guide, we’ll build a Student Enrollment Dashboard in .NET MAUI using Syncfusion^® .NET MAUI Charts. The goal? Transform admissions data into a responsive, visually engaging experience that works across devices.

Why this Dashboard matters

Every tile in the dashboard offers a unique perspective on enrollment health, filled seats, gender diversity, program breakdowns, and international reach. Admissions teams can track progress, identify trends, and make data-driven decisions instantly. It includes:

Degree filter for dynamic segmentation.
Admission KPI gauge showing filled vs. total seats.
Notice banner for seat availability and deadlines.
Gender distribution Doughnut chart.
A Sunburst chart for program breakdown (Degree → Course → Program Type).
A Column chart for student count by country/region.
Responsive layout optimized for desktops and mobile.

The core goals are:

Monitor enrollment targets.
Visualize gender and regional diversity.
Highlight program popularity and capacity.
Enable data-driven decisions for outreach and scheduling. Visualizing a Student Enrollment Dashboard using .NET MAUI Charts

Step 1: Create the Model and ViewModel

Begin by defining the classes that structure your data and manage business logic. These models form the backbone of the dashboard, ensuring that well-organized data drives each visualization.

Refer to the code example below.

public class DegreeModel
{
    // Represents a single academic degree (e.g., Medical, Engineering, Arts & Science).
    // Used to drive the degree filter, admission KPI gauge, notice banner, gender chart, and region chart.
}

public class CountryStat
{
    // Holds information about student counts by country or region.
    // Drives the Students by Country/Region column chart visualization.
}

public class ProgramType
{
    // Represents a specific program type under a course.
    // Used in the Sunburst chart to show distribution of students by program type.
}

public class CourseModel
{
    // Represents a course under a degree (e.g., AI, Civil, Neuro).
    // Drives the middle ring of the Sunburst chart and aggregates program type data.
}

public class GenderStat
{
    // Holds gender distribution data (e.g., Male, Female, Other).
    // Drives the Gender Distribution doughnut chart visualization.
}

public class SunburstNode
{
    // Represents hierarchical data for the Sunburst chart:
    // Degree → Course → ProgramType with associated student count.
}

Next, create the EnrollmentViewModel, which binds these models to the UI.

public partial class EnrollmentViewModel 
{
    // Selected degree drives all dashboard tiles
    public DegreeModel? SelectedDegree {get; set;}
    // KPI Gauge bindings
    public int GaugeTotal {get; set;}
    public double GaugeShapePointer {get; set;}
    public string AdmittedSeatsByDegree {get; set;}
    public int RemainingVacancies {get; set;}

    // Notice banner deadline
    public string ApplicationCloseText {get; set;}

    // Collections bound to UI
    public ObservableCollection<DegreeModel> Degrees { get; }
    public IList<SunburstNode> SunburstData { get; }
    public List<Brush> CustomBrushes { get; set; }
    public IList<GenderStat> GenderStats => SelectedDegree?.Gender ?? new List<GenderStat>();
    public IList<CountryStat> CountryStats => SelectedDegree?.Countries ?? new List<CountryStat>();

    // Constructor initializes static data and palettes
    public EnrollmentViewModel()
    {
        Degrees = new ObservableCollection<DegreeModel>(CreateStaticDegrees());
        SelectedDegree = Degrees.First(d => d.Name == "Medical");
        SunburstData = BuildSunburst(Degrees);
    }

    private IEnumerable<DegreeModel> CreateStaticDegrees()
    {
        // Generates the static dataset of degree, course, gender, and country stats for the dashboard.
    }

    private IList<SunburstNode> BuildSunburst(IEnumerable<DegreeModel> degrees)
    {
        // Builds hierarchical nodes (Degree → Course → ProgramType) for the Sunburst chart visualization.
    }
}

Note: You can view the complete code implementation in the Model and EnrollmentViewModel classes.

Step 2: Configure the layout

Once the data structure is ready, the next step is to design the dashboard layout. A clean and responsive layout ensures that insights are easy to interpret.

We’ll use a MainGrid divided into three rows:

Header row: Branded title and degree filter.
Middle row: KPI gauge, notice banner, and gender chart.
Bottom row: Sunburst chart and regional column chart.

Here’s how you can do it in XAML code:

<!--MainGrid-->   
<Grid x:Name="MainGrid" RowDefinitions="{OnPlatform Default='0.6*,4.2*,5*', Android='2*,440,5*', iOS='2*,440,5*'}" >

    <Grid Grid.Row="1" ColumnDefinitions="{OnPlatform Default='*,auto', Android='*',iOS='*'}" RowDefinitions="{OnPlatform Default='*',Android='*,*',iOS='*,*'}">

        <!--Title-->
        <Grid ColumnDefinitions="Auto,*" >
            …
        </Grid>

        <!--ComboBox-->
        <Border Grid.Row="1" Grid.Column="1">
            …
        </Border>
    </Grid>

    <!--AdmissionData, NoticeData, GenderData-->
    <Grid Grid.Row="1" ColumnDefinitions="{OnPlatform Default='*',WinUI='*,*',MacCatalyst='*,*'}" >

        <Grid Grid.Column="0" RowDefinitions="{OnPlatform Default='*', Android='*,*',iOS='*,*'}" ColumnDefinitions="{OnPlatform Default='*', WinUI='6*,4*', MacCatalyst='6*,4*'}">
            …
        </Grid>
    </Grid>

    <!--OverallData, RegionData-->
    <Grid Grid.Row="2" ColumnDefinitions="{OnPlatform Default='*',WinUI='*,*',MacCatalyst='*,*'}" RowDefinitions="{OnPlatform Default='*', Android='*,*',iOS='*,*'}">
        …
    </Grid>
</Grid>

Step 3: Degree filter with branded header

After setting up the layout, focus on the header section. This area establishes the dashboard’s identity and provides an interactive degree filter.

Using SfComboBox, users can quickly switch between programs such as Medical, Engineering, and Arts. Each selection triggers dynamic updates across all charts, ensuring real-time insights.

Step 4: Admission KPI Gauge

Now that users can filter by degree, it’s time to visualize seat occupancy. The KPI gauge answers the critical question: How many seats are filled?

Powered by SfRadialGauge, this component delivers an intuitive radial chart with smooth animations and bold annotations. As the needle moves, users instantly see progress toward enrollment goals.

Key features:

Animated transitions when switching degrees.
Clean axis styling for clarity.
Central annotations showing admitted seats vs. total capacity.

Here’s the complete XAML code block.

<Border>
    <Grid RowDefinitions="Auto,*">
        <Label Text="Admission Count Details"/>

        <sfGauge:SfRadialGauge Grid.Row="1">
            <sfGauge:SfRadialGauge.Axes>
                <sfGauge:RadialAxis Minimum="0" Maximum="{Binding SelectedDegree.TotalSeats}"/>
                    <sfGauge:RadialAxis.AxisLineStyle>
                        <sfGauge:RadialLineStyle CornerStyle="BothCurve"/>
                    </sfGauge:RadialAxis.AxisLineStyle>
                    …
                    <sfGauge:RadialAxis.Annotations>
                        <sfGauge:GaugeAnnotation>
                            <sfGauge:GaugeAnnotation.Content>
                                ...
                            </sfGauge:GaugeAnnotation.Content>
                        </sfGauge:GaugeAnnotation>
                    </sfGauge:RadialAxis.Annotations>
                    <sfGauge:RadialAxis.Pointers>
                        …
                    </sfGauge:RadialAxis.Pointers>
                </sfGauge:RadialAxis>
            </sfGauge:SfRadialGauge.Axes>
        </sfGauge:SfRadialGauge>
    </Grid>
</Border>

Here’s what the Radial Gauge looks like:

Radial gauge chart in .NET MAUI displaying admission KPI

Step 5: Display context with a Notice banner

Numbers alone don’t tell the full story. To provide context, add a notice banner that highlights seat availability and application deadlines. This card-style component keeps admissions teams informed and focused on key dates.

<Border x:Name="Banner" >
    <Grid VerticalOptions="{OnPlatform Default=Fill, MacCatalyst=Center}" RowDefinitions="auto,*" RowSpacing="{OnPlatform Default=14, MacCatalyst=18}" Padding="{OnPlatform Default=20, MacCatalyst=20 0 20 20}">

        <Image Source="graduate.png" HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="60" HeightRequest="60"/>

        <VerticalStackLayout Grid.Row="1" Spacing="{OnPlatform Default=10, MacCatalyst=14}">

            <Label Text="{Binding SelectedDegree.Name, StringFormat='Degree: {0}'}" FontAttributes="Bold" FontSize="18" TextColor="#610097"/>

            <Label Text="{Binding RemainingVacancies, StringFormat='Available seats {0}'}" FontSize="16" TextColor="#1F2937"/>

            <Label Text="{Binding ApplicationCloseText}" FontSize="13" TextColor="#6B7280" LineBreakMode="WordWrap"/>
        </VerticalStackLayout>
    </Grid>
</Border>

Here’s the expected output:

Notice Banner in .NET MAUI showing seats and deadline

Step 6: Visualizie Gender distribution with a Doughnut Chart

Now, showcase diversity using a gender distribution chart. Built with SfCircularChart and DoughnutSeries, this visualization updates dynamically based on the selected degree.

This chart highlights ,

Half‑doughnut layout for clarity.
Each slice represents a category such as Female, Male, or Other.
Custom legend to display color, category, and count.
Responsive legend placement for desktop and mobile.

Here’s a code snippet to achieve this.

<Border>
    <Grid>
        <sfCharts:SfCircularChart>
            <sfCharts:DoughnutSeries ItemsSource="{Binding GenderStats}" StartAngle=" EndAngle="360" XBindingPath="Category" YBindingPath="Count"/>
        </sfCharts:SfCircularChart>
    </Grid>
</Border>

After running the code, you’ll see this.

Step 7: Sunburst Chart for program distribution

After showcasing gender diversity, the next step is to explore the overall enrollment structure. To achieve this, we’ll use a Sunburst Chart, which provides an interactive and visually appealing way to represent hierarchical data.

This chart illustrates enrollment across various degrees, courses, and program types, enabling teams to quickly identify trends and popular programs. Think of it as a hierarchical tree reimagined as concentric rings:

The innermost ring represents degrees.
The middle ring expands into courses.
The outer ring displays program types.

With labels and interactive tooltips, users can drill down into the data to uncover which programs attract the most students and pinpoint areas with the strongest enrollment. This visualization makes complex relationships easy to interpret at a glance.

Below is the code you need to implement this feature.

<Border>
    <sfSunburst:SfSunburstChart ItemsSource="{Binding SunburstData}" ValueMemberPath="StudentCount" >

        <sfSunburst:SfSunburstChart.Levels>
            <sfSunburst:SunburstHierarchicalLevel GroupMemberPath="DegreeName"/>
            <sfSunburst:SunburstHierarchicalLevel GroupMemberPath="CourseName"/>
            <sfSunburst:SunburstHierarchicalLevel GroupMemberPath="ProgramType"/>
        </sfSunburst:SfSunburstChart.Levels>

    </sfSunburst:SfSunburstChart>
</Border>

The following image shows the Sunburst Chart.

Sunburst Chart in .NET MAUI showing program distribution

Step 8: Visualize Students by Country/Region with a Column Chart

Finally, let’s highlight geographic diversity in enrollment. The Students by Country/Region tile provides a clear view of how student numbers vary across different countries. Each column represents a country, and its height reflects the number of students enrolled, making comparisons quick and intuitive.

This visualization is implemented using SfCartesianChart with a ColumnSeries, which binds directly to country-level statistics. As users switch between degrees, the chart updates dynamically to reflect the latest data. Rounded corners and smooth animated transitions give the chart a modern, polished look that feels approachable and professional.

Below is the code snippet you’ll need to create this feature:

<Border>
    <sfCharts:SfCartesianChart>
        <sfCharts:SfCartesianChart.XAxes>
            <sfCharts:CategoryAxis>
            </sfCharts:CategoryAxis>
        </sfCharts:SfCartesianChart.XAxes>

        <sfCharts:SfCartesianChart.YAxes>
            <sfCharts:NumericalAxis>
            </sfCharts:NumericalAxis>
        </sfCharts:SfCartesianChart.YAxes>

        <sfCharts:ColumnSeries ItemsSource="{Binding CountryStats}" XBindingPath="Country" YBindingPath="Count"/>
    </sfCharts:SfCartesianChart>
</Border>

Column Chart in .NET MAUI showing country and region

Implement these steps, and you’ll have a fully functional Student Enrollment Dashboard in .NET MAUI, as shown below.

Visualizing a Student Enrollment Dashboard using .NET MAUI Charts

GitHub reference

For more details, refer to the .NET MAUI Student Enrollment dashboards sample on GitHub.

Conclusion

Thank you for reading! In this guide, we explored how to create a Student Enrollment Dashboard using Syncfusion .NET MAUI Charts.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day tria l.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Create Clutter-Free Layouts with Row and Column Spanning in Blazor DataGrid

Zahra Sandra Nasaka — Fri, 02 Jan 2026 14:54:55 +0000

TL;DR: Struggling with cluttered grids? Row and column spanning in Blazor DataGrid solves this by merging cells intelligently. Learn how to enable AutoSpan, handle merge/unmerge operations, and apply best practices for performance and usability.

Modern web apps demand clean, readable tables. When the same value repeats across rows or columns, grids can look cluttered and hard to scan. Syncfusion’s Blazor DataGrid solves this with row and column spanning, automatically merging duplicate values into a single cell. The result? A cleaner, more user-friendly table, without extra coding.

This feature has been introduced as part of the Syncfusion^® 2025 Volume 4 release, which brings exciting updates across the suite.

In this guide, you’ll learn:

What row and column spanning are?
How to enable and customize them?
How to control spanning programmatically?
Key limitations and best practices.

Don’t worry if you’re new to this; everything is explained in a simple, easy-to-understand way.

What are row and column spanning?

Row and Column spanning is enabled by using the AutoSpan property on your SfGrid tag. When adjacent cells share the same value, the grid merges them into a single cell.

The table below lists the available AutoSpanMode options:

Settings	Description
AutoSpanMode.None	No merging(default).
AutoSpanMode.Row	Merges matching cells horizontally in the same row.
AutoSpanMode.Column	Merges matching cells vertically in the same column.
AutoSpanMode.HorizontalAndVertical	Combines both row and column spans (rows first, then columns).

Here are some example use cases:

Row spanning: A TV guide where one show runs across multiple time slots.
Column spanning: A work schedule where “Meeting” repeats down consecutive hours.

How to enable row spanning

Row spanning merges identical values across multiple columns in the same row. For example, if Evening News appears twice in a row, the grid combines them into one wider cell.

Here’s how you can do it in code:

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@TeleCastDataList"
        GridLines="GridLine.Both"
        AutoSpan="AutoSpanMode.Row"
        AllowSelection="false"
        EnableHover="false">
    <GridColumns>
        <GridColumn Field=@nameof(TelecastData.Channel) HeaderText="Channel" Width="200" IsFrozen="true"></GridColumn>
        <GridColumn Field=@nameof(TelecastData.Genre) HeaderText="Genre" Width="120" IsFrozen="true"></GridColumn>
        <GridColumn Field=@nameof(TelecastData.Program12AM) HeaderText="12:00 AM" Width="150"></GridColumn>
        <!-- ... other time slot columns ... -->
    </GridColumns>
</SfGrid>

Note: Try it out with the row spanning demo and refer to the documentation for more insights.

Watch how the feature works in action:

Row spanning in Blazor DataGrid

How to enable column spanning

Column spanning merges identical values vertically across consecutive rows. For example, lunch might cover multiple hourly slots for one employee.

Code snippet to achieve this:

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@EmployeeTimeSheet"
        AutoSpan="AutoSpanMode.Column">
    <GridColumns>
        <!-- ... column definitions ... -->
    </GridColumns>
</SfGrid>

Matching entries in a column are displayed in a taller cell, allowing you to see the pattern, as shown below.

Column spanning in Blazor DataGrid

Note: Try it out with the column spanning demo and refer to the documentation for more information.

Skipping spanning for specific columns

Need spanning everywhere except one column? For example, if you don’t want prime-time TV slots to merge, set the AutoSpan property to AutoSpanMode.None in that column to override the grid settings.

<GridColumn Field=@nameof(TelecastData.Program8PM)
            HeaderText="8:00 PM"
            AutoSpan="AutoSpanMode.None">
</GridColumn>

Note: For more insights, refer to the documentation on disabling row and column spanning .

Merging cells programmatically

Auto spanning is great, but sometimes you need manual control. Syncfusion provides the following methods for custom merging:

MergeCellsAsync: Merge selected cells.
UnmergeCellsAsync: Split specific merged areas.
UnmergeAllAsync: Clears all custom merges.

Here’s a basic code example with buttons to merge and unmerge single or multiple cells:

@using Syncfusion.Blazor.Grids

<SfButton OnClick="MergeCellsAsync">Merge Cell</SfButton>
<SfButton OnClick="UnMergeCell">UnMerge Cell</SfButton>

<SfButton OnClick="MergeMultipleCellsAsync">Merge Multiple Cells</SfButton>
<SfButton OnClick="UnMergeCells">UnMerge Multiple Cells</SfButton>

<SfButton OnClick="UnMergeAllCells">UnMerge All Cells</SfButton>

<SfGrid @ref="Grid" DataSource="@EmployeeTimeSheet" GridLines="GridLine.Both" AllowSelection="false" EnableHover="false">
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeDetails.EmployeeID) HeaderText="Employee ID" Width="150" TextAlign="TextAlign.Right" IsPrimaryKey="true" IsFrozen="true"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.EmployeeName) HeaderText="Employee Name" Width="180" IsFrozen="true"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_9_00) HeaderText="9:00 AM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_9_30) HeaderText="9:30 AM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_10_00) HeaderText="10:00 AM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_10_30) HeaderText="10:30 AM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_11_00) HeaderText="11:00 AM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_11_30) HeaderText="11:30 AM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_12_00) HeaderText="12:00 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_12_30) HeaderText="12:30 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_1_00) HeaderText="1:00 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_1_30) HeaderText="1:30 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_2_00) HeaderText="2:00 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_2_30) HeaderText="2:30 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_3_00) HeaderText="3:00 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_3_30) HeaderText="3:30 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_4_00) HeaderText="4:00 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_4_30) HeaderText="4:30 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(EmployeeDetails.Time_5_00) HeaderText="5:00 PM" Width="150" TextAlign="TextAlign.Center"></GridColumn>
    </GridColumns>
</SfGrid>
@code
{
    public List<EmployeeDetails>? EmployeeTimeSheet { get; set; }
    public SfGrid<EmployeeDetails>? Grid;

    protected override void OnInitialized()
    {
        EmployeeTimeSheet = EmployeeDetails.GetAllRecords();
    }

    public async Task MergeCellsAsync()
    {
        await Grid.MergeCellsAsync(new MergeCellInfo
        {
            RowIndex = 1,
            ColumnIndex = 5,
            ColumnSpan = 2,
        });
    }

    public async Task UnMergeCell()
    {
        await Grid.UnmergeCellsAsync(new UnmergeCellInfo
        {
            RowIndex = 1,
            ColumnIndex = 5,
        });
    }

    public async Task MergeMultipleCellsAsync()
    {
        await Grid.MergeCellsAsync(new[]
        {
            new MergeCellInfo { RowIndex = 0, ColumnIndex = 2, ColumnSpan = 2 },
            new MergeCellInfo { RowIndex = 5, ColumnIndex = 3, ColumnSpan = 3 },
            new MergeCellInfo { RowIndex = 7, ColumnIndex = 4, ColumnSpan = 2 }
        });
    }

    public async Task UnMergeCells()
    {
        await Grid.UnmergeCellsAsync(new[]
        {
            new UnmergeCellInfo { RowIndex = 0, ColumnIndex = 2 },
            new UnmergeCellInfo { RowIndex = 5, ColumnIndex = 3 },
            new UnmergeCellInfo { RowIndex = 7, ColumnIndex = 4 }
        });
    }

    public async Task UnMergeAllCells()
    {
        await Grid.UnmergeAllAsync();
    }
}

Tips and limitations

Before you implement row and column spanning, it’s important to understand a few constraints and best practices to ensure smooth functionality:

This feature has limitations with:

AutoFill (that drag-to-fill feature).
Grouping (can’t merge across group headers).
Some frozen column setups.
Detail templates when doing column spans.

Here are some quick tips to optimize your grid:

Use row spanning for timelines or event schedules.
Use column spanning for tasks or shifts.
Combine with frozen columns for better context.
Test with large datasets for performance.

Conclusion

Thank you for reading! Row and column spanning in Syncfusion Blazor DataGrid , introduced in the Essential Studio^® 2025 Volume 4 release, helps you create cleaner, more readable tables with just a few lines of code. It’s perfect for schedules, lists, or any data with repeats. Try it out in the demos.

Check out our Release Notes and What’s New pages to see the other updates in this release, and leave your feedback in the comments section below. We would love to hear from you.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Integrate Gemini AI with Syncfusion .NET MAUI Smart Components

Zahra Sandra Nasaka — Tue, 30 Dec 2025 17:31:47 +0000

TL;DR: Supercharge your .NET MAUI apps with Gemini AI! Learn how to add natural language filtering to DataGrid, AI-driven scheduling, and smart text editing, all in one guide.

As AI-powered applications continue to grow, running models locally offers significant advantages over cloud-based services, greater control, enhanced privacy, and faster performance. With the 2025 Vol 4 release, Syncfusion introduces Smart Components for .NET MAUI, designed to bring AI-driven functionality directly to your device.

By integrating the Gemini local model with these Syncfusion Smart Components, you can unlock powerful features such as:

Smart DataGrid: Perform sorting, filtering, and grouping using plain language commands.
Smart Scheduler: Create and manage appointments effortlessly through natural language input.
Smart Text Editor: Get AI-assisted text suggestions and completions as you type.

Running Gemini locally ensures instant responses and keeps your data secure by eliminating the need to send information to the cloud.

Prerequisites

Before you start, ensure the following requirements are met:

Install the .NET 9 SDK or a later version.
Set up a .NET MAUI development environment using Visual Studio 2022 (version 17.3 or later).
Configure the Gemini model for integration.

Integrating .NET MAUI AI-powered components with the Gemini local model

The Smart DataGrid, Smart Scheduler, and Smart Text Editor components integrate seamlessly into a .NET MAUI application. In this guide, we’ll walk through the process of creating and implementing them step by step.

Step 1: Setting up Gemini

To begin, you need a Gemini API key. First, visit Google AI Studio, sign in with your Google account, and generate an API key. Once the key is created, copy it and store it securely because you’ll need it to authenticate API requests.

Next, review the Gemini Models documentation to understand the available models, their capabilities, and limitations. This will help you select the right model for your application.

Step 2: Create a Gemini AI service

With your API key ready, the next step is to create a service class that will handle Gemini API calls. This service should manage authentication, request/response handling, and safety settings.

Here’s how to set it up:

First, create a Services folder in your .NET MAUI project.
Then, add a new file named GeminiService.cs in the Services folder.
Finally, implement the service using the following code:

public class GeminiService
{
    private readonly string _apiKey = "AIzaSyBrmli86r0v0cehbDPfzC7mUweXqakleqg";
    private readonly string _modelName = "gemini-2.5-flash"; // Example model
    private readonly string _endpoint = "https://generativelanguage.googleapis.com/v1beta/models/";
    private static readonly HttpClient HttpClient = new(new SocketsHttpHandler
    {
        PooledConnectionLifetime = TimeSpan.FromMinutes(30),
        EnableMultipleHttp2Connections = true
    })
    {
        DefaultRequestVersion = HttpVersion.Version20
    };

    private static readonly JsonSerializerOptions JsonOptions = new()
    {
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase
    };

    public GeminiService(IConfiguration configuration)
    {
        HttpClient.DefaultRequestHeaders.Clear();
        HttpClient.DefaultRequestHeaders.Add("x-goog-api-key", _apiKey);
    }

    public async Task<string> CompleteAsync(List<ChatMessage> chatMessages)
    {
        var requestUri = $"{_endpoint}{_modelName}:generateContent";
        var parameters = BuildGeminiChatParameters(chatMessages);
        var payload = new StringContent(JsonSerializer.Serialize(parameters, JsonOptions), Encoding.UTF8, "application/json");

        try
        {
            using var response = await HttpClient.PostAsync(requestUri, payload);
            response.EnsureSuccessStatusCode();
            var json = await response.Content.ReadAsStringAsync();
            var result = JsonSerializer.Deserialize<GeminiResponseObject>(json, JsonOptions);
            return result?.Candidates?.FirstOrDefault()?.Content?.Parts?.FirstOrDefault()?.Text ?? "No response from model.";
        }
        catch (Exception ex) when (ex is HttpRequestException or JsonException)
        {
            throw new InvalidOperationException("Gemini API error.", ex);
        }
    }

    private GeminiChatParameters BuildGeminiChatParameters(List<ChatMessage> messages)
    {
        var contents = messages.Select(m => new ResponseContent(m.Text, m.Role == ChatRole.User ? "user" : "model")).ToList();
        return new GeminiChatParameters
        {
            Contents = contents,
            GenerationConfig = new GenerationConfig
            {
                MaxOutputTokens = 2000,
                StopSequences = new List<string> { "END_INSERTION", "NEED_INFO", "END_RESPONSE" }
            },
            SafetySettings = new List<SafetySetting>
            {
                new() { Category = "HARM_CATEGORY_HARASSMENT", Threshold = "BLOCK_ONLY_HIGH" },
                new() { Category = "HARM_CATEGORY_HATE_SPEECH", Threshold = "BLOCK_ONLY_HIGH" },
                new() { Category = "HARM_CATEGORY_SEXUALLY_EXPLICIT", Threshold = "BLOCK_ONLY_HIGH" },
                new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" },
                new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" },
            }
        };
    }
}

Step 3: Define request and response models

After creating the service, you need to define the request and response models. To do this, create a file named GeminiModels.cs in the Services folder and add the following classes.

namespace SmartComponentsMAUI
{
    public class Part { public string Text { get; set; } }
    public class Content { public Part[] Parts { get; init; } = Array.Empty<Part>(); }
    public class Candidate { public Content Content { get; init; } = new(); }
    public class GeminiResponseObject { public Candidate[] Candidates { get; init; } = Array.Empty<Candidate>(); }

    public class ResponseContent
    {
        public List<Part> Parts { get; init; }
        public string Role { get; init; }
        public ResponseContent(string text, string role)
        {
            Parts = new List<Part> { new Part { Text = text } };
            Role = role;
        }
    }

    public class GenerationConfig
    {
        public int MaxOutputTokens { get; init; } = 2048;
        public List<string> StopSequences { get; init; } = new();
    }

    public class SafetySetting
    {
        public string Category { get; init; } = string.Empty;
        public string Threshold { get; init; } = string.Empty;
    }

    public class GeminiChatParameters
    {
        public List<ResponseContent> Contents { get; init; } = new();
        public GenerationConfig GenerationConfig { get; init; } = new();
        public List<SafetySetting> SafetySettings { get; init; } = new();
    }
}

Next, create GeminiInferenceService.cs to connect the Gemini service with your inference logic, refer to the code below.

public class GeminiInferenceService : IChatInferenceService
{
    private readonly GeminiService _geminiService;

    public GeminiInferenceService(GeminiService geminiService)
    {
        _geminiService = geminiService;
    }

    public async Task<string> GenerateResponseAsync(List<ChatMessage> chatMessages)
    {
        return await _geminiService.CompleteAsync(chatMessages);
    }
}

Step 4: Register Services in .NET MAUI

Finally, register the Syncfusion components and Gemini services in the MauiProgram.cs refer to the code example below for details.

using Syncfusion.Maui.Core.Hosting;
using Syncfusion.Maui.SmartComponents;

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .ConfigureSyncfusionCore();

builder.Services.AddSingleton<GeminiService>();
builder.Services.AddSingleton<IChatInferenceService, GeminiInferenceService>();

Smart DataGrid

The Syncfusion .NET MAUI Smart DataGrid allows you to use plain language commands for sorting, filtering, and grouping data. This makes managing complex datasets more intuitive and user-friendly.

To add the Syncfusion .NET MAUI Smart DataGrid component, include the following in MainPage.xaml. In this example, the Smart DataGrid is used to manage product orders, payment status, and identify which product has the highest freight cost.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:smartComponents="clr-namespace:Syncfusion.Maui.SmartComponents;assembly=Syncfusion.Maui.SmartComponents"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             xmlns:local="clr-namespace:SmartComponentsMAUI"
             x:Class="SmartComponentsMAUI.MainPage">

    <smartComponents:SfSmartDataGrid Grid.Row="1" 
                                     x:Name="dataGrid"                                               
                                     ItemsSource="{Binding OrderInfoCollection}">

        <smartComponents:SfSmartDataGrid.AssistViewSettings>
            <smartComponents:DataGridAssistViewSettings SuggestedPrompts="{Binding Suggestions}" ShowAssistViewBanner="True"/>
        </smartComponents:SfSmartDataGrid.AssistViewSettings>

        <smartComponents:SfSmartDataGrid.Columns>
            <syncfusion:DataGridNumericColumn MappingName="OrderID" HeaderText="Order ID" Format="0" Width="100"/>
            <syncfusion:DataGridTextColumn MappingName="CustomerName" HeaderText="Customer Name" Width="150"/>
            <syncfusion:DataGridTextColumn MappingName="ProductName" HeaderText="Product Name" Width="145"/>
            <syncfusion:DataGridDateColumn MappingName="OrderDate" Width="140" HeaderText="Order Date" Format="dd/MM/yyyy"/>
            <syncfusion:DataGridNumericColumn MappingName="Quantity" Width="120" Format="N0"/>
            <syncfusion:DataGridNumericColumn MappingName="Freight" Width="120" Format="C"/>
            <syncfusion:DataGridTextColumn MappingName="ShipCity" HeaderText="Ship City" Width="150"/>
            <syncfusion:DataGridTextColumn MappingName="ShipCountry" HeaderText="Ship Country" Width="150"/>
            <syncfusion:DataGridTextColumn MappingName="PaymentStatus" HeaderText="Payment Status" Width="130"/>
        </smartComponents:SfSmartDataGrid.Columns>
    </smartComponents:SfSmartDataGrid>
</ContentPage>

Run the sample to see the output. When you click a suggestion, the AI processes your request and returns a tailored response.

Smart DataGrid in .NET MAUI

You can use natural language prompts to apply sorting, grouping, and filtering.

Example:

Sort order ID
Group products
Filter products where the payment status is UPS

Refer to the following images.

.NET MAUI Smart DataGrid Sorting

.NET MAUI Smart DataGrid Grouping

.NET MAUI Smart DataGrid Filtering

Smart Scheduler

The Syncfusion .NET MAUI Smart Scheduler helps manage events intelligently. Add the Syncfusion MAUI Smart Scheduler component to MainPage.Xaml. In this example, it manages events, summarizes them, detects conflicts, and finds free time slots.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:smartComponents="clr-namespace:Syncfusion.Maui.SmartComponents;assembly=Syncfusion.Maui.SmartComponents"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             xmlns:local="clr-namespace:SmartComponentsMAUI"
             x:Class="SmartComponentsMAUI.MainPage">
    <smartComponents:SfSmartScheduler Grid.Row="2"
                                      EnableAssistButton="True"
                                      View="Month">
        <smartComponents:SfSmartScheduler.AssistViewSettings>
            <smartComponents:SchedulerAssistViewSettings SuggestedPrompts="{Binding SuggestedPrompts}" ShowAssistViewBanner="True"/>
        </smartComponents:SfSmartScheduler.AssistViewSettings>                
    </smartComponents:SfSmartScheduler>
</ContentPage>

You can run the following outputs.

.NET MAUI Smart Scheduler CRUD

.NET MAUI Smart Scheduler conflict detection

.NET MAUI Smart Scheduler Free Time Slot detection

Smart Text Editor

The Syncfusion .NET MAUI Smart Text Editor provides AI-assisted text completion and suggestions.

Now, add the Syncfusion .NET MAUI Smart TextEditor component to MainPage.Xaml. In this example, the Smart Text Editor is used to get the response when the user role is Support engineer responding to customer tickets.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:smartComponents="clr-namespace:Syncfusion.Maui.SmartComponents;assembly=Syncfusion.Maui.SmartComponents"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
             xmlns:local="clr-namespace:SmartComponentsMAUI"
             x:Class="SmartComponentsMAUI.MainPage">

    <smartComponents:SfSmartTextEditor UserRole="Support engineer responding to customer tickets"/>

</ContentPage>

Key attributes:

UserRole: This attribute is required to define the context of the autocompletion based on the role of the person typing.
UserPhrases: This attribute is optional to provide predefined expressions that align with the user’s/application’s tone and frequently used content. .NET MAUI Smart Text Editor with AI-assisted text completion

Conclusion

Thank you for reading! With the 2025 Vol 4 release, Syncfusion introduces Smart Components for .NET MAUI, bringing AI-driven functionality directly to your device.

Gemini AI brings intelligent features to .NET MAUI apps with Smart Components like DataGrid, Scheduler, and Text Editor. From natural language filtering to AI-driven scheduling and smart text suggestions, these integrations make your apps smarter and more user-friendly. Start building AI-powered experiences today!

Check out our Release Notes and What’s New pages to see the other updates in this release, and leave your feedback in the comments section below.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day tria l

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Build Your First Autonomous Coding Workflow with Syncfusion Code Studio Agent Mode

Zahra Sandra Nasaka — Mon, 29 Dec 2025 19:40:54 +0000

TL;DR: Agent Mode in Syncfusion Code Studio automates multi-step coding tasks using AI. It analyzes your prompt, plans changes, creates files, integrates components, runs builds, fixes errors, and verifies results, all with checkpoints for safety.

In today’s fast-paced development world, AI isn’t just a buzzword; it’s transforming how we build software. Syncfusion^®Code Studio, launched in 2025, is a next-generation AI-powered IDE designed for enterprise teams. It delivers secure, scalable, and customizable AI assistance to supercharge productivity.

To achieve this, Code Studio offers four intelligent modes: Chat, Edit, Autocomplete, and Agent. Among these, Agent Mode truly stands out. Why? Because it works like an experienced developer, managing multi-step coding tasks for you. From analyzing your codebase to creating files, writing code, and testing changes, Agent Mode makes hands-free coding a reality.

This guide walks you through your first autonomous task using Agent Mode. We’ll start from scratch and build a simple app together. By the end, you’ll see how Agent Mode tackles real-world challenges, such as refactoring or adding new features, all while keeping you in control. No prior AI experience required.

Let’s dive in!

What is an autonomous agent in AI coding tools?

An autonomous agent goes beyond simple suggestions or chat responses. It independently handles complex, multi-step tasks by:

Analyzing your prompt and codebase.
Creating a step-by-step plan.
Using built-in tools such as file editing, terminal commands, or searches to execute changes.
Verifying results, fixing errors, and summarizing outcomes.

In tools like Syncfusion Code Studio, the agent acts like a senior developer, reasoning across files, making decisions, and completing end-to-end workflows with minimal intervention. It’s autonomous yet responsible: you approve major actions through checkpoints for safety.

What is Agent Mode in Syncfusion Code Studio?

Agent Mode is Code Studio’s autonomous coding agent. Activated in the chat panel, it transforms natural language descriptions into executed code across your project.

The key features include:

Hands-free execution: Describe a feature; the agent plans, builds, and verifies it.
Built-in tools: File creation/editing, terminal runs, codebase search, Git integration, image analysis, and more.
Checkpoints and approvals: Auto-saves states for easy revert; pauses for your confirmation on major actions.
Context-aware: The Agent scans your project files to understand dependencies and relationships.

Whether you’re starting from scratch or enhancing an existing project, Agent Mode handles multi-file tasks, refactors, or full app bootstrapping.

Why choose Code Studio’s Agent Mode?

Agent Mode isn’t just another AI feature. Here’s what makes it enterprise-ready:

Governance and security: Maintain complete control over your data. Use your own API key (BYOK) for any AI model, including OpenAI or Anthropic. Set usage limits, track costs, and ensure data privacy with robust security measures.
Full control: Stay in charge with approvals, checkpoints, and custom rules via AGENTS.md. Every major action requires your confirmation for safe execution.
UI Builder: Need UI layouts fast? The AI-powered UI Builder analyzes your requirements and generates layouts using Syncfusion components (license required for production use). This context-aware approach delivers precise, platform-specific assistance instead of generic advice. Learn more on the UI Builder page.
Productivity boost: Automates repetitive and multi-step workflows, generating over 30% of new code in Syncfusion’s internal development workflows.

It’s not only about speed, it’s about responsible AI that scales for real-world enterprise development.

Getting started: Quick setup

Before using Agent Mode, you will need to set up Syncfusion Code Studio. Here is how:

Download and install the Syncfusion Code Studio by visiting the official website. The IDE is available for Windows, macOS, and Linux, and installation takes less than a minute.
Next, sign in once the installation is complete, follow the instructions in the official documentation to log in.
Then, configure AI Models. Code Studio supports multiple LLMs, including OpenAI’s GPT series, Anthropic’s Claude, and even local models. You can subscribe to Syncfusion Premium models or use your own API key (BYOK) for flexibility.
Finally, create a workspace by starting a new empty project.

Common setup obstacles and fixes:

Login issues: If authentication fails, check your internet connection or enterprise firewall settings.
Model configuration: Use recommended models, and test with a simple query to confirm setup.
System requirements: Ensure at least 8GB RAM. If you experience lag, close other applications.

With setup done, you’re ready to start building with Agent Model.

Building a Todo List app from scratch

For your first task, we’ll create a simple React Todo List app using Agent Mode. Why this example? It’s beginner-friendly, involves multiple files, and demonstrates true autonomy in action.

Step 1: Open an empty workspace

Start with a fresh workspace so the Agent can set up everything.

Step 2: Switch to Agent Mode

In the chat interface, select Agent Mode from the mode selector. This step gives the agent full access to tools for code creation, editing, and UI design.

Agent Mode selector

Step 3: Craft your prompt

Now, it’s time to write your prompt. Be clear and detailed. The more context you provide, the better the output. Here’s an example prompt:

“Create a React Todo List using Syncfusion components with the following requirements:

Features: Add tasks, mark complete, delete, persist in localStorage. Use functional components with hooks.

Components: TodoApp (main), TodoForm (input), TodoList (display), TodoItem (single task)

UI: Header with title, input field, task list with checkboxes and delete buttons, and empty state messages.

Styling: Clean CSS, responsive design, strikethrough for completed tasks, and hover effects.”

Step 4: Understand request and plan changes

Once you submit your prompt, the Agent analyzes it and breaks the task into clear, sequential steps. This planning phase ensures accuracy and efficiency before any code is written.

Step 5: Request permission

Before executing changes, the Agent requests your approval for each tool action. You will see a confirmation button in the chat panel with two options.

Continue: Approve the action and proceed.
Cancel: Deny the action and prevent execution. Agent confirmation

Step 6: Execute changes

Once approved, the Agent proceeds to:

Creates a React project and installs Syncfusion dependencies.
Generates component files.
Integrate Syncfusion React components and applies CSS styling for the UI.

You will see real-time updates in the chat panel as files are created and code is written.

File creation in Agent Mode

Step 7: Verify results

Next, the Agent verifies everything by building the app, checking for errors, and automatically fixing any issues. You’ll see progress updates in the chat panel, ensuring the app is ready to run without manual intervention.

Step 8: Review and run

Finally, after verification, the Agent summarizes all changes. Review the summary, then watch as the development server will automatically launch your app at http://localhost:3000. No manual coding required!

Todo List Application

This entire process takes minutes, not hours. If something goes wrong, say a syntax error, reply in chat:

Fix the error in line 10.

Common obstacles and how to overcome them

Even the best AI tools have limitations, and real-world development can present obstacles. Here’s how Code Studio helps you overcome them:

Challenge: Vague prompts lead to incomplete results:

Solution: Be detailed, include tech stack, features, and constraints.

Challenge: Hallucinations or errors from weaker models:

Solution: Switch to stronger or premium LLMs. Always review plans before execution.

Challenge: Large codebases overwhelm context:

Solution: Break tasks into smaller steps. For example, check the main component first; then add the new feature.

Here are a few tips:

Upload screenshots for UI tasks (e.g., “Build an app matching this screenshot”).
Save successful prompts for reuse.
Teams can enforce coding standards or security rules via custom configurations.

Level up: Modifying existing projects

Once you master building from scratch, try enhancing the existing projects. Clone a repo (e.g., via Git tool ), then prompt:

“Refactor this code to use Redux for state management.” or “Add authentication with JWT and error handling.”

Why is Agent Mode great for complex work? It reasons across files, verifies integrations, and handles multi-step workflows. Start small:

“Optimize performance in this component.”

Best practices

To get the most out of Agent Mode, follow these proven strategies:

Prompt like a pro: Clear, structured prompts yield the best results.
Review everything: Always check summaries and diffs, AI isn’t infallible.
Experiment with Models: Test different LLMs to find which works best for your workflow.
Scale safely: Use checkpoints for larger tasks to maintain control.

Note: Follow these tips, and Agent Mode can accelerate development by 70% or more.

Conclusion

Thank you for following along! You’ve just completed your first autonomous task with Syncfusion Code Studio‘s Agent Mode, building a Todo List app from scratch. This mode isn’t about replacing developers; it’s about amplifying them, handling the grunt work so you focus on innovation.

Start small, iterate, and soon you will be ready to tackle enterprise-scale projects effortlessly. Download Code Studio today, try this task, and share your results in the comments. Happy coding!

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Bring Glassmorphism to .NET MAUI Apps with Liquid Glass UI

Zahra Sandra Nasaka — Mon, 29 Dec 2025 14:00:20 +0000

TL;DR: Flat UIs lack depth and modern appeal. .NET MAUI Liquid Glass UI introduces glassmorphism to .NET MAUI with blur, translucency, and adaptive tinting. Learn how to implement it step by step.

Looking to give your .NET MAUI apps a modern, premium look? Syncfusion .NET MAUI Liquid Glass UI brings glassmorphism to cross-platform applications, helping you build sleek, immersive interfaces for iOS and Mac Catalyst.

What is Liquid Glass UI?

Liquid Glass leverages Apple’s UIVisualEffectView to deliver high-performance blur effects on iOS and macOS. Syncfusion brings this capability to all .NET MAUI controls, offering:

Blurred backgrounds for depth and elegance.
Adaptive color tinting that blends with your app theme.
Light refraction effects for a polished, modern appearance.

These features create a visually rich interface while maintaining readability and accessibility across platforms.

Why does it matter?

Today’s users expect apps that feel premium and intuitive. Glassmorphism, with its transparency, depth, and subtle shadows, meets that expectation. Syncfusion’s .NET MAUI Liquid Glass effect lets you design layered, elegant UIs for cross-platform apps without compromising performance.

Key benefits of Liquid Glass UI

Native performance: Built on Apple’s UIVisualEffectView.
Cross control support: Works with DataGrid, Charts, Editors, and more
Customizable: Adjust blur style, corner radius, and shadow effects
Modern design: Adds a sleek, glass-like finish.
Accessibility friendly: Honors system theme settings.

How to apply the Liquid Glass effect in .NET MAUI?

Applying the .NET MAUI Liquid Glass effect is simple and requires minimal code changes. Here’s how to enable and configure it in the Image Editor control:

Prerequisites

Before you begin, ensure that you have the following:

.NET 10
macOS 26 or later
iOS 26 or later

These requirements guarantee compatibility and optimal performance for your development environment.

Step 1: Wrap the control

Start by using SfGlassEffectView from Syncfusion.Maui.Core to apply blur and translucency to your UI.

Step 2: Enable the Liquid Glass effect

Next, set the EnableLiquidGlassEffect property to true on the control to activate the effect.

Step 3: Customize the background

For a consistent look, make the control and toolbar backgrounds transparent.

Here are the key properties you can configure:

EffectType: Choose Regular (blurred) or Clear.
CornerRadius: Round the corners for a softer design.
EnableShadowEffect: Add depth to the UI.
BackgroundColor: Apply a tint for visual appeal.

Refer to the XML code example below.

<Grid>
    <core:SfGlassEffectView EffectType="Regular" CornerRadius="20" Background="#007AFF">
        <imageEditor:SfImageEditor x:Name="imageEditor"
                                   Background="Transparent"
                                   SelectionStroke="#007AFF"
                                   Source="editorimage.png"
                                   EnableLiquidGlassEffect="True">
            <imageEditor:SfImageEditor.ToolbarSettings>
                <imageEditor:ImageEditorToolbarSettings Background="Transparent"
                                                        Stroke="Transparent"/>
            </imageEditor:SfImageEditor.ToolbarSettings>
        </imageEditor:SfImageEditor>
    </core:SfGlassEffectView>
</Grid>

Note: Combine Liquid Glass effect with gradients and shadows for a modern UI . Experiment with EffectType and CornerRadius to create unique designs. For more details, check the official documentation.

After executing the above code example, you’ll see the transformation: previously, the UI was flat and static, but with the Liquid Glass effect applied, it becomes an elegant, frosted glass design with depth, as shown in the following image.

.NET MAUI Image Editor without the Liquid Glass effect

.NET MAUI Image Editor with the Liquid Glass effect

GitHub reference

Explore demos on GitHub and start using the .NET MAUI Liquid Glass effect today.

Conclusion

Thanks for reading! In this blog, we’ve explored the new Liquid Glass UI effect in Syncfusion .NET MAUI controls introduced in the Essential Studio 2025 volume 4 release. Check out our Release Notes and What’s New pages to see the other updates in this release, and leave your feedback in the comments section below.

If you’re a Syncfusion user, you can download the latest setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related Blogs

This article was originally published at Syncfusion.com.

Create Print-Ready Excel Reports in C# with Programmatic Page Setup

Zahra Sandra Nasaka — Tue, 09 Dec 2025 18:00:24 +0000

TL;DR: Repetitive Excel page setup wastes hours and increases the risk of formatting errors. This guide demonstrates how to manage print settings in C#, from margins and headers to scaling, ensuring your reports remain consistent and ready for printing.

Preparing Excel files for printing shouldn’t feel like a chore. Instead of tweaking settings manually, configure them programmatically in C# to achieve optimal results. This approach ensures consistent, error-free formatting for reports, invoices, and dashboards fast.

To simplify this process, the Syncfusion^® .NET Excel Library (Essential XlsIO) offers a powerful API that enables you to create, read, and edit Excel files in C# without relying on Microsoft Office. With Essential XlsIO, you can programmatically control page settings, such as orientation, scaling, margins, headers/footers, print area, and more, all directly from your C# code.

In this guide, you’ll learn how to configure key page setup options programmatically, including:

Orientation
Paper size
Margin
Print titles
Print area
Header and footer
Scaling
Additional page setup options

Let’s dive in and explore how to set up these essential page settings in Excel using C#.

Prerequisites

Before you start, ensure you have:

.NET SDK 8.0 or later: Required to build and run C# applications.
Syncfusion XlsIO NuGet package: Provides the API for Excel file manipulation.
Visual Studio or VS Code: Your preferred IDE for writing and testing the code.

Setting up your .NET project

Create a new .NET Core console application in Visual Studio.
Install the Syncfusion.XlsIO.Net.Core NuGet package.

Applying page setup options in Excel using C

In this example, we will generate a monthly sales report in an Excel document and apply professional page setup options to make it print-ready.

Step 1: Generate monthly sales report data

Start by creating an Excel document using Essential XlsIO.

using (ExcelEngine engine = new ExcelEngine())
{
    IApplication app = engine.Excel;
    app.DefaultVersion = ExcelVersion.Xlsx;

    IWorkbook workbook = app.Workbooks.Create(1);
    IWorksheet worksheet = workbook.Worksheets[0];
    worksheet.Name = "Monthly Sales";

    // Title
    worksheet.Range["A1"].Text = "Monthly Sales Report";
    worksheet.Range["A1"].CellStyle.Font.Bold = true;
    worksheet.Range["A1"].CellStyle.Font.Size = 16;

    // Headers
    worksheet.Range["A3"].Text = "Order ID";
    worksheet.Range["B3"].Text = "Date";
    worksheet.Range["C3"].Text = "Region";
    worksheet.Range["D3"].Text = "Salesperson";
    worksheet.Range["E3"].Text = "Units";
    worksheet.Range["F3"].Text = "Amount";
    worksheet.Range["A3:F3"].CellStyle.Font.Bold = true;
    worksheet.Range["A3:F3"].CellStyle.Color = Syncfusion.Drawing.Color.FromArgb(240, 240, 240);

    // Generate Sales Data
    int row = 4;
    string[] regions = new[] { "North", "South", "West", "East" };
    Random rnd = new Random(17);
    DateTime month = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);

    foreach (string region in regions)
    {
        worksheet.Range["A" + row].Text = region + " Region";
        worksheet.Range["A" + row].CellStyle.Font.Bold = true;
        worksheet.Range["A" + row].CellStyle.Font.Size = 12;
        row++;

        for (int count = 0; count < 20; count++)
        {
            worksheet.Range["A" + row].Text = $"ORD-{region.Substring(0, 1)}-{1000 + count}";
            worksheet.Range["B" + row].DateTime = month.AddDays(rnd.Next(0, 28));
            worksheet.Range["B" + row].NumberFormat = "dd-MMM";
            worksheet.Range["C" + row].Text = region;
            worksheet.Range["D" + row].Text = "Rep " + rnd.Next(1, 6);
            worksheet.Range["E" + row].Number = rnd.Next(1, 25);
            worksheet.Range["F" + row].Number = Math.Round(2500 + rnd.NextDouble() * 20000, 2);
            worksheet.Range["F" + row].NumberFormat = "#,##0.00";
            row++;
        }
        row++;
    }
}

Step 2: Apply page setup options

Now that the data is ready, let’s configure the worksheet’s page setup options for professional printing.

Orientation

Page orientation determines whether your worksheet prints in Portrait (vertical) or Landscape (horizontal). For wider datasets, Landscape is ideal.

Here, we will set the page orientation to Landscape.

IPageSetup pageSetup = worksheet.PageSetup;

// Set Orientation to Landscape
pageSetup.Orientation = ExcelPageOrientation.Landscape;

Paper size

Paper size specifies the physical dimensions of your printed page. Common options include A4, Letter, and Legal. Choosing the right size ensures your report looks consistent across all regions. For instance, A4 is the standard in most countries, while Letter is the typical size in the United States.

Let’s set the paper size to A4, as shown in the following code example.

IPageSetup pageSetup = worksheet.PageSetup;

// Set Paper Size to A4
pageSetup.PaperSize = ExcelPaperSize.PaperA4;

Margin

Margins are the blank spaces around the edges of your worksheet. Proper margins prevent content from being cut off and improve readability. Use smaller margins to fit more data or wider margins for binding and notes.

Let’s configure margins in inches as shown in the following code example.

IPageSetup pageSetup = worksheet.PageSetup;

// Set Margins in inches

// Top, Bottom - 0.5 inch
pageSetup.TopMargin = 0.5;
pageSetup.BottomMargin = 0.5;

// Left, Right - 0.25 inch
pageSetup.LeftMargin = 0.25;
pageSetup.RightMargin = 0.25;

// Header, Footer - 0.3 inch
pageSetup.HeaderMargin = 0.3;
pageSetup.FooterMargin = 0.3;

Print titles

When your worksheet spans multiple pages, repeating header rows and columns on every page makes the printed report easier to read. Without this feature, readers may lose context when navigating later pages.

For example:

Repeat the header row containing column names, such as Region, Sales Person, and Units.

Refer to the following code example.

IPageSetup pageSetup = worksheet.PageSetup;

// Repeat the 3rd row on every printed page
pageSetup.PrintTitleRows = "$3:$3";

// Repeat the first column on every printed page
pageSetup.PrintTitleColumns = "$A:$A";

By setting these options, your headers remain visible across all pages, improving readability and maintaining context for longer reports.

Print area

By default, Excel prints the entire worksheet, which often includes helper columns, notes, or hidden calculations you don’t want in the final report. The Print Area feature allows you to define a specific range of cells for printing, ensuring that only relevant data appears.

Why is this important?

Cleaner reports: Exclude unnecessary rows or columns.
Better control: Print only the main dataset, not formulas or hidden sections.
Dynamic flexibility: Adjust the range based on your data size.

For example, if your report starts at row 3 and ends at the last used row in column F, you can set the print area like this.

IPageSetup pageSetup = worksheet.PageSetup;

// Define the print area from A3 to the last used row in column F
int lastRow = worksheet.UsedRange.LastRow;
pageSetup.PrintArea = $"A3:F{lastRow}"

Header and footer

Headers and footers add valuable context to printed pages, such as page numbers, dates, file names, or branding. This makes reports easier to read and share. Dynamic fields like &P (current page), &N (total pages), &D ] (date), and &T (time) keep content updated automatically. You can also format text (font, size, style) and include elements like your company name or logo for a professional finish.

The following are the commonly used tokens for setting header and footer content in an Excel document using XlsIO.

Token	Meaning
&P	Current page number
&N	Total number of pages
&D	Current date
&T	Current time
&A	Sheet name
&F	File name
&Z	File path
&G	Picture placeholder
&B	Bold toggle
&I	Italic toggle
&U	Single underline toggle
&E	Double underline toggle
&nn	Font size (pt)
&"Font,Style"	Font family and style
&Krrrrggggbbbb	Font color (hex)
\n	Line break
&&	Literal ampersand

Here’s how to apply headers and footers in C#.

IPageSetup pageSetup = worksheet.PageSetup;

// Apply left header as "Monthly Sales" with Calibri font of size 14 and bold
pageSetup.LeftHeader = "&\"Calibri,Bold\"&14 Monthly Sales";

// Apply center header as "Month Year" with bold
pageSetup.CenterHeader = "&B&10" + month.ToString("MMMM yyyy");

// Apply right header with page number and total pages
pageSetup.RightHeader = "Page &P of &N";

// Apply left footer with sheet name
pageSetup.LeftFooter = "Sheet: &A";

// Apply center footer with current date and time
pageSetup.CenterFooter = "Generated: &D &T";

// Apply right footer with file name
pageSetup.RightFooter = "&F";

Page breaks

Page breaks give you precise control over where a new page begins when printing your Excel worksheets. This is especially useful for large reports or grouped data, as it ensures each section starts on a fresh page for improved readability. For example, in a sales report, each region can begin on a new page for easier navigation.

You can programmatically add:

Horizontal page breaks (before a specific row)
Vertical page breaks (before a specific column)

Here’s how to add horizontal page breaks dynamically based on data blocks.

IPageSetup pageSetup = worksheet.PageSetup;

// Add a page break before each region. Assuming each region block (title + data) takes 22 rows including spacing.
int firstRegionRow = 4;
int blockHeight = 22;
for (int count = 1; count < regions.Length; count++)
{
    int titleRow = firstRegionRow + count * blockHeight;

    // Add a horizontal page break before the title row of each region
    worksheet.HPageBreaks.Add(worksheet.Range["A" + titleRow]);
}

Similarly, you can add vertical page breaks using IWorksheet.VPageBreaks in the .NET Excel library.

Scaling

Scaling controls how your worksheet fits onto printed pages. Use FitToPagesWide and FitToPagesTall to control the number of pages your worksheet spans when printed, and use Zoom for fixed percentage scaling.

FitToPagesWide = 1 and FitToPagesTall = 0: Ideal for wide reports (e.g., Monthly Sales Report), so content fits on one page horizontally while flowing vertically.
FitToPagesWide = 1 and FitToPagesTall = 1: Forces the entire worksheet onto a single page.
Zoom: Use a fixed percentage only when Fit settings are not applied. Excel ignores Zoom if FitToPagesWide or FitToPagesTall is set.

Here is how to apply both Zoom and Fit-to-Page settings.

IPageSetup pageSetup = worksheet.PageSetup;

// Set the scaling to 120%. Not applied due to fit settings.
pageSetup.Zoom = 120;

// Fit to 1 page wide and unlimited tall
pageSetup.FitToPagesTall = 0;

// Fit to 1 page wide
pageSetup.FitToPagesWide = 1;

Additional options

Apart from major page setup options, you can fine-tune the print layout for a polished look. The options include:

Hiding gridlines for a cleaner appearance.
Suppressing row and column headings for a professional finish.
Controlling comments display, enabling black-and-white or draft mode, and adjusting page numbering to match your branding or printing needs.

Let’s apply these final tweaks to make the print view look its best.

IPageSetup pageSetup = worksheet.PageSetup;

// Set gridlines to be hidden in the printed page
pageSetup.PrintGridlines = false;

// Set center the sheet horizontally on the page
pageSetup.CenterHorizontally = true;

// Set not to center the sheet vertically on the page
pageSetup.CenterVertically = false;

//Do not print headings
pageSetup.PrintHeadings = false;

// Do not print comments
pageSetup.PrintComments = ExcelPrintLocation.PrintNoComments;

// Do not print in black and white only
pageSetup.BlackAndWhite = true;

// Draft quality set to false
pageSetup.Draft = false;

// Set first page number as 2
pageSetup.FirstPageNumber = 2;

We have now successfully applied the page setup options to the Excel document. When the user initiates printing, these settings are automatically detected by the printer, ensuring a properly formatted monthly sales report.

Applying page settings to the Excel document using C#

Use cases

Page setup options are essential for producing professional, print-ready reports. Here are some practical scenarios:

Wide reports, such as sales summaries or dashboards, benefit from Landscape mode.
International reports require A4 paper, while U.S. clients expect Letter-Sized Paper.
Financial statements require wider margins for binding; dashboards, on the other hand, need tighter margins for maximum data visibility.
Inventory reports with hundreds of rows remain readable when column titles are repeated.
Client invoices exclude hidden calculations and notes by setting a print area.
Audit reports include page numbers and timestamps for compliance.

GitHub reference

Also, refer to the page setup options in Excel using C# demo on the GitHub repository.

Conclusion

Thanks for reading! In this blog, we have learned how to programmatically apply page setup options in an Excel document using C#. By implementing these techniques, you can transform repetitive formatting tasks into a one-time solution that saves hours and ensures professional, print-ready reports.

If you’re already a Syncfusion user, download the setup from the license and downloads page. Otherwise, start with a free 30-day trial and experience the benefits firsthand.

Need help or have questions? Reach out through our support forum, support portal, or feedback portal. We’re always happy to assist you!

Related blogs

This article was originally published at Syncfusion.com.