Embed, load, explore
A complete business workbook
The editor has loaded northstar-operations.txwb: ten connected worksheets, 240 equipment orders, and a native sales dashboard.
Explore the fileFollow the business data
Overview charts read Monthly, which calculates from Orders. Changes flow through the reports, inventory, and forecast.
See it reactChange a real order
Add three units to the first order. Its calculated revenue, stock usage, monthly totals, worksheet charts, and dashboard queries update.
Use the worksheet tabs to discover Products, Monthly, Invoice, and the editable Workflow diagram. Page Layout shows saved print settings, headers, and footers.
Live document
Load and calculation results
Fetching the sample TXWB...
- Active view
- —
- Worksheets
- —
Ready to tryUse the controls above to interact with this demo.
Integrate TX Sheet Control
From a Razor component to a loaded workbook
This example hosts the editor and loads an existing .txwb file. The workbook's cells, formulas, tables, charts, sparklines, styles, review annotations, print settings, and dashboard come from that file. They are not rebuilt by the startup JavaScript.
Component
<tx-sheet-control>
1. Configure ASP.NET Core
Install TXTextControl.TXSheetControl.AspNetCore. Enable package assets and register the Tag Helper. The helper includes the browser scripts, stylesheet, initializer, and fonts.
using TXTextControl.TXSheetControl.AspNetCore;
var builder = WebApplication.CreateBuilder(args);
builder.WebHost.UseStaticWebAssets();
builder.Services.AddControllersWithViews();
var app = builder.Build();
app.UseTXSheetControlAssets();
app.UseStaticFiles();
app.MapDefaultControllerRoute();
app.Run();
@addTagHelper *, TXTextControl.TXSheetControl.AspNetCore
<tx-sheet-control id="integrationSpreadsheet" height="640" />
2. Fetch bytes and load TXWB after ready
The ready event supplies the initialized editor. Fetch the binary file, check the HTTP response, and await editor.load with the native format. Inspect the returned warnings before enabling application controls.
document.addEventListener("txsheetcontrolready", async (event) => {
if (event.target.id !== "integrationSpreadsheet") return;
const editor = event.detail;
const response = await fetch("/demos/sheet-control/integration/workbook");
if (!response.ok) throw new Error(`Workbook request failed: ${response.status}`);
const bytes = new Uint8Array(await response.arrayBuffer());
const result = await editor.load(
bytes, TXTextControl.TXSheetControl.StreamType.InternalWorkbookFormat
);
console.log(result.warnings);
});
The running implementation adds error handling, loading state, and document notifications. After a load, resolve fresh document handles because the previous workbook objects have been replaced.
3. Explore a connected operations pack
| Worksheet | What to explore |
|---|
| Overview / Monthly | Live KPI formulas, two cross-sheet charts, plan variance, icon sets, and heatmaps. |
| Orders | 240 dated records, structured calculated columns, dropdown validation, filters, frozen panes, data bars, and a review thread. |
| Trends | Line, column, and win/loss sparklines on the same positive and negative monthly variances. |
| Products / Inventory | Lookup formulas, interactive status lists, stock planning, reorder highlights, notes, and hyperlinks. |
| Forecast | Protected formulas, editable assumptions, input constraints, and a scenario chart. |
| Invoice / Workflow | Customer mail-merge bindings, invoice calculations, page layout and fields, editable shapes, and aligned connectors. |
| Guide / Sales dashboard | A feature map plus saved KPI, chart, table, region slicer, and drill-down widgets. |
The data represents a fictional workplace equipment supplier. Orders drive the monthly report, product momentum, stock balances, forecast, and dashboard. Customer names and figures are demonstration data.
4. Keep the native document features
Save with InternalWorkbookFormat to retain the complete native workbook. For XLSX, use SpreadsheetML with omitDashboards: true; dashboards are first-class TXWB views, separate from worksheet charts.
File APIs
editor.load(bytes, StreamType.InternalWorkbookFormat)
editor.save(StreamType.InternalWorkbookFormat)
editor.save(StreamType.SpreadsheetML, { omitDashboards: true })
The supplied file was authored once using the .NET document API. The optional authoring source is included in Code; serving and loading the existing file does not invoke a server document engine.
NuGet packages
TXTextControl.TXSheetControl.AspNetCore
2.0.0-beta.1
Provides the Razor spreadsheet editor, browser APIs, and packaged fonts.
dotnet add package TXTextControl.TXSheetControl.AspNetCore --version 2.0.0-beta.1
