Integrating DataGrid with DocumentEditor in Blazor App
19 Jun 202611 minutes to read
This guide shows how to integrate the Blazor DocumentEditor (WordProcessor) together with the Blazor DataGrid in a Blazor Web App using Server interactivity.
If you haven’t created your Blazor App yet, follow the Blazor getting started guide to create a project.
Install NuGet packages
From the server project folder (where the .csproj file is located), install the following packages:
dotnet add package Syncfusion.Blazor.WordProcessor -v 34.1.29
dotnet add package Syncfusion.Blazor.Grid -v 34.1.29
dotnet add package Syncfusion.Blazor.Themes -v 34.1.29
dotnet restoreDo not install Syncfusion.Blazor together with Syncfusion.Blazor.WordProcessor. They conflict and produce ambiguity errors.
Add required namespaces
Open the ~/Components/_Imports.razor file and import the namespaces.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.DocumentEditor
@using Syncfusion.Blazor.GridsRegister Blazor service
Add the Blazor service to the ~/Program.cs file to enable Blazor components in the application.
using Syncfusion.Blazor;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddSyncfusionBlazor();
....Add stylesheet and script resources
To apply styles and enable features, reference the theme CSS and scripts within the ~/Components/App.razor file.
<head>
<!-- Theme stylesheet -->
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
</head>
<body>
<!-- Blazor DocumentEditor component's script reference-->
<script src="_content/Syncfusion.Blazor.WordProcessor/scripts/syncfusion-blazor-documenteditor.min.js" type="text/javascript"></script>
<!-- Blazor DataGrid component's script reference -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>Configure render mode
If your app’s interactivity location is set to Per page/component, add a render mode directive at the top of ~Pages/*.razor where you need interactivity.
@rendermode InteractiveServerNOTE
If the
interactivity locationis set toGlobaland the app is configured for Server render mode, no per‑page directive is required.
Integrate DataGrid and DocumentEditor
Add the Blazor DocumentEditor and DataGrid components to a .razor file within your app.
In this example, clicking the Invoice button in the DataGrid row generates an invoice for that order and displays it in the DocumentEditor for preview.
@page "/"
@rendermode InteractiveServer
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DocumentEditor
<h4 class="mt-4">Invoice Generator</h4>
<SfGrid TItem="Order" DataSource="@Orders" AllowPaging="true">
<GridColumns>
<GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
<GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer" Width="150" />
<GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Width="120" Format="C2" />
<GridColumn Field="@nameof(Order.ShipCity)" HeaderText="City" Width="150" />
<GridColumn HeaderText="Invoice" Width="130">
<Template>
@{
var row = context as Order;
}
<button class="btn btn-success btn-sm" @onclick="@(() => GenerateInvoice(row))">
Generate Invoice
</button>
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
<h4 class="mt-4">Invoice Preview</h4>
<SfDocumentEditorContainer @ref="EditorContainer" EnableToolbar="true">
</SfDocumentEditorContainer>
@code {
private SfDocumentEditorContainer? EditorContainer;
private List<Order> Orders = new()
{
new() { OrderID = 10001, CustomerID = "ALFKI", Freight = 110.50, ShipCity = "Denmark" },
new() { OrderID = 10002, CustomerID = "ANATR", Freight = 220.00, ShipCity = "Brazil" },
new() { OrderID = 10003, CustomerID = "ANTON", Freight = 330.75, ShipCity = "Germany" },
new() { OrderID = 10004, CustomerID = "BLONP", Freight = 180.90, ShipCity = "USA" },
new() { OrderID = 10005, CustomerID = "BOLID", Freight = 440.00, ShipCity = "Brazil" }
};
public class Order
{
public int OrderID { get; set; }
public string CustomerID { get; set; } = "";
public double Freight { get; set; }
public string ShipCity { get; set; } = "";
}
private async Task GenerateInvoice(Order order)
{
if (EditorContainer?.DocumentEditor == null)
return;
var sfdt = BuildInvoice(order);
await EditorContainer.DocumentEditor.OpenAsync(sfdt);
}
private string BuildInvoice(Order o)
{
// Generate the invoice in SFDT format.
return $$"""
{
"sections": [
{
"blocks": [
{ "paragraphFormat": { "textAlignment": "Center" },
"inlines": [ { "text": "My Orders PVT LTD", "bold": true, "fontSize": 24 } ] },
{ "paragraphFormat": { "textAlignment": "Center" },
"inlines": [ { "text": "No.123, Main Street, Business City" } ] },
{ "paragraphFormat": { "textAlignment": "Center" },
"inlines": [ { "text": "Phone: +1 234 567 8900\n" } ] },
{ "inlines": [ { "text": "INVOICE", "bold": true, "fontSize": 22 } ] },
{ "inlines": [ { "text": "Invoice No: INV-{{o.OrderID}}" } ] },
{ "inlines": [ { "text": "Customer ID: {{o.CustomerID}}" } ] },
{ "inlines": [ { "text": "City: {{o.ShipCity}}" } ] },
{ "inlines": [ { "text": "Date: {{DateTime.Now:dd-MMM-yyyy}}" } ] },
{ "inlines": [ { "text": "Amount: ${{o.Freight:F2}}" } ] },
{ "inlines": [ { "text": "Notes: Thank you for your business." } ] },
{ "inlines": [ { "text": "\n" } ] },
{ "inlines": [ { "text": "Authorized Signature", "bold": true } ] },
{ "inlines": [ { "text": "______________________________" } ] }
]
}
]
}
""";
}
}By default, the
SfDocumentEditorContainercomponent initializes anSfDocumentEditorinstance internally. If you like to use the events ofSfDocumentEditorcomponent, then you can setUseDefaultEditorproperty as false and define your ownSfDocumentEditorinstance with event hooks in the application (Razor file).
Run the application
Use the following command to run the application in the browser.
dotnet runThe app launches and renders the Blazor DocumentEditor and Blazor DataGrid in your default browser.
Use cases
Integrating the Blazor DataGrid with the DocumentEditor enables users to transform structured data into fully editable Word style documents within a single workflow. Users can browse, filter, and select records in the DataGrid and instantly generate or update documents without switching applications.
Invoice and quotation generation
Display order or billing records in the DataGrid with details such as order ID, customer name, items, quantity, and pricing. When a user selects a record, the DocumentEditor loads a formatted invoice or quotation template populated with the selected data. Users can then edit text, adjust formatting, add terms, and finalize the document for export or sharing.
HR record management
Create an HR management system where the DataGrid lists employee records such as employee ID, name, department, role, and status. Selecting an employee record opens an editable document in the DocumentEditor for offer letters, appraisal reports, employment contracts, or disciplinary notices. HR teams can quickly personalize documents while ensuring consistency and accuracy.
Customer support
Build a customer support application where the DataGrid displays support tickets with fields like ticket ID, customer name, issue type, status, and priority. Selecting a ticket opens a case summary document in the DocumentEditor, allowing agents to write incident reports, resolution summaries, or customer communication letters directly from the case data.
Legal agreement and contract drafting
Use the DataGrid to manage legal records such as contracts, agreements, or compliance documents. Each row can represent a contract with details like contract number, parties involved, effective date, and status. Selecting a record loads a contract template in the DocumentEditor where legal teams can review, edit clauses, add signatures, and prepare the document for approval.
Business reports
Present business data such as project details, financial summaries, or operational metrics in the DataGrid. Users can select one or more records to generate structured reports, summaries, or approval documents in the DocumentEditor. This enables teams to convert raw data into polished, professional documents without manual copying or formatting errors.