syncfusion-content · kmkrish001 · Mar 30, 2026 · Mar 26, 2026 · Mar 26, 2026 · Mar 27, 2026
diff --git a/blazor/common/integration/blazor-with-document-editor.md b/blazor/common/integration/blazor-with-document-editor.md
@@ -1,23 +1,25 @@
 ---
 layout: post
 title: Syncfusion® Blazor Document Editor and DataGrid Integration
-description: Step-by-step guide to integrating Syncfusion Blazor Document Editor and DataGrid in Blazor applications.
+description: Step-by-step guide to integrate Syncfusion Blazor Document Editor and DataGrid in Blazor applications.
 platform: Blazor
 control: common
 documentation: ug
 ---
 
-# Integrating Syncfusion® DataGrid with Document Editor in Blazor App
+# Integrating Syncfusion® DataGrid with Document Editor in Blazor app
 
 This guide shows how to integrate the **[Syncfusion® Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor)** (WordProcessor) together with the **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** in a Blazor Web App using `Server` interactivity.
 
+A common use case for this integration is when applications need to let users work with structured records and immediately generate or edit a related document. Users can browse, filter, or select items in the DataGrid and instantly see the corresponding details loaded into the Document Editor as an editable Word‑style document. This is especially valuable in scenarios such as **order confirmation**, **HR record management**, and **customer support workflows**, where teams frequently transform Grid data into formal documents. It enables users to produce invoices, summaries, letters, or agreements directly from the same screen without switching tools, copying data, or risking manual entry errors.
+
 ## Prerequisites
 
 * [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements): Make sure your development environment meets the required system specifications for using Syncfusion Blazor components.
 
 ## Create a project
 
-Create a Blazor Web App using Server render mode. Open the terminal and run the command.
+Create a **Blazor Web App** using **Server** render mode. Open the terminal and run the command.
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -28,7 +30,7 @@ cd BlazorWebAppServer
 {% endhighlight %}
 {% endtabs %}
 
-## Install NuGet Packages
+## Install NuGet packages
 
 Open the integrated terminal in the project folder (where the `.csproj` is) and run.
 
@@ -43,9 +45,9 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-> Do not install `Syncfusion.Blazor` together with `Syncfusion.Blazor.WordProcessor`. They conflict and produce ambiguity errors.
+> Do not install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) together with [Syncfusion.Blazor.WordProcessor](https://www.nuget.org/packages/Syncfusion.Blazor.WordProcessor). They conflict and produce ambiguity errors.
 
-## Add Required Namespaces
+## Add required namespaces
 
 Add Syncfusion namespaces to your project-level `_Imports.razor`.
 
@@ -59,42 +61,45 @@ Add Syncfusion namespaces to your project-level `_Imports.razor`.
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion Blazor Service
+## Register Syncfusion Blazor service
 
-Register the Syncfusion Blazor service in your app’s **~/Program.cs**.
+Register the Syncfusion Blazor service in your app’s `~/Program.cs`.
 
 {% tabs %}
-{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="1 5" %}
+{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="1 8" %}
 
 using Syncfusion.Blazor;
+
 var builder = WebApplication.CreateBuilder(args);
+
 builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents()
+    .AddInteractiveServerComponents();
+
 builder.Services.AddSyncfusionBlazor();
-var app = builder.Build();
 ....
 
 {% endhighlight %}
 {% endtabs %}
 
-## Add Stylesheet and Script Resources
+## Add stylesheet and script resources
 
 Add the theme CSS and Syncfusion scripts in `~/App.razor`.
 
 ```html
 <head>
-    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
 </head>
 
 <body>
    	<!-- Syncfusion Blazor Document Editor component's script reference-->
 	<script src="_content/Syncfusion.Blazor.WordProcessor/scripts/syncfusion-blazor-documenteditor.min.js" type="text/javascript"></script>
+
 	<!-- Syncfusion 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
+## 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. 
 
@@ -110,36 +115,109 @@ If your app’s interactivity location is set to `Per page/component`, add a ren
 
 Add the Syncfusion Document Editor 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 Document Editor for preview.
+
 {% tabs %}
 {% highlight razor %}
 
 @page "/"
 @rendermode InteractiveServer
 
-<h1>DocumentEditor</h1>
-<SfDocumentEditorContainer EnableToolbar=true></SfDocumentEditorContainer>
-<h1>DataGrid</h1>
-<SfGrid DataSource="@Orders" />
+@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>
 
-@code{
-    public List<Order> Orders { get; set; }
+<h4 class="mt-4">Invoice Preview</h4>
 
-    protected override void OnInitialized()
+<SfDocumentEditorContainer @ref="EditorContainer" EnableToolbar="true">
+</SfDocumentEditorContainer>
+
+@code {
+    private SfDocumentEditorContainer? EditorContainer;
+
+    private List<Order> Orders = new()
     {
-        Orders = Enumerable.Range(1, 10).Select(x => new Order()
-        {
-            OrderID = 1000 + x,
-            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
-            Freight = 2 * x,
-            OrderDate = DateTime.Now.AddDays(-x),
-        }).ToList();
+        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; } = "";
     }
-
-    public class Order {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { 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": "______________________________" } ] }
+                    ]
+                }
+            ]
+        }
+        """;
     }
 }
 
@@ -148,7 +226,7 @@ Add the Syncfusion Document Editor and DataGrid components to a `.razor` file wi
 
 > By default, the `SfDocumentEditorContainer` component initializes an `SfDocumentEditor` instance internally. If you like to use the events of `SfDocumentEditor` component, then you can set `UseDefaultEditor` property as **false** and define your own `SfDocumentEditor` instance with event hooks in the application (Razor file).
 
-## Run the Application
+## Run the application
 
 Use the following command to run the application in the browser.
 
@@ -160,6 +238,12 @@ dotnet run
 {% endhighlight %}
 {% endtabs %}
 
-The app launches and renders the Syncfusion® Blazor Document Editor and DataGrid in your default browser.
+The app launches and renders the **[Syncfusion® Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor)** and **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** in your default browser.
+
+![Blazor DataGrid with Document Editor](images/documenteditor-with-datagrid.webp)
+
+## See also
+
+- [Getting started with Blazor DocumentEditor component in Web app](https://help.syncfusion.com/document-processing/word/word-processor/blazor/getting-started/web-app)
 
-![Blazor DataGrid with Document Editor](images/documenteditor-with-datagrid.webp)
+- [Getting started with Blazor DataGrid in Web app](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
diff --git a/blazor/common/integration/images/documenteditor-with-datagrid.webp b/blazor/common/integration/images/documenteditor-with-datagrid.webp