MindFusion.Spreadsheet: Formatted Text

Starting with version 1.2, MindFusion.Spreadsheet adds support for formatted text. The control can import, create, display and export formatted texts. In this blog we will demonstrate how to create formatted text in a cell.

Introduction

As with all previous blogs we start off by creating a new Windows Forms Application in Visual Studio and adding a WorkbookView control to the main form. The WorkbookView displays a Workbook with a single worksheet.

Creating the formatted text

Formatted texts are created programmatically by instantiating from the FormattedText class. The class provides a constructor, which can initialize the formatted text from a markup string, similar to HTML. The string supports the following tags: <fontname=”fontname“>, <fontsize=”fontsize“>, <i>, <b>, <u>, <s>, and <color=”#rrggbb“>. The following code creates several formatted texts:

worksheet.Cells["A1"].Data = new FormattedText("The meeting is <color=\"#ff0000\">important</color=\"#ff0000\">!");
worksheet.Cells["A2"].Data = new FormattedText("<fontsize=\"18\">A title <fontsize=\"8\">(1994)");
worksheet.Cells["A3"].Data = new FormattedText("This text contains some keywords that are highlighted.");</fontsize=\"8\"></fontsize=\"18\">

Exporting

The formatted texts are exported to all supported formats, including HTML, PDF, XLSX, ODS, image, and so on. The following image illustrated the formatted texts created earlier exported to HTML:

spreadsheet-formattedtext

The source code of the sample is available for download from here:

https://mindfusion.eu/_samples/SpreadsheetFormattedTexts.zip

The trial version of MindFusion.Spreadsheet for WinForms can be downloaded from here:

Download MindFusion.Spreadsheet for WinForms Trial Version

About MindFusion.Spreadsheet for WinForms: A powerful .NET spreadsheet component with great capabilities for editing, styling and formatting large amounts of data.

MindFusion.Spreadsheet: Import and Export

The following scheme illustrates the file formats supported by MindFusion.Spreadsheet for WinForms:

spreadsheet-formats

Importing

MindFusion.Spreadsheet can load data from CSV (comma-separated values), XLSX (Office Open XML), ODS (OpenDocument Spreadsheet), and its native binary and XML formats. The files are imported through a set of importer classes: CsvImporter for CSV, ExcelImporter for XLSX, and CalcImporter for ODS. To import a file, create an instance of the respective importer class, set the necessary properties, and call its Import method. The following code demonstrates how to import a workbook from an existing XLSX file:

var excelImporter = new ExcelImporter();
excelImporter.Import(workbook, @"d:\workbook.xlsx");

Importing from CSV can be further facilitated through the use of a built-in CsvImportForm. The form provides the user interface to enter various options and preview the data before it is actually imported.

Exporting

MindFusion.Spreadsheet can export data to a variety of formats, including image, PDF, CSV, XLSX, ODS, HTML and MHTML. In addition the workbooks can be previewed and printed to paper and XPS. The workbooks and worksheets are exported through a set of exporter classes: ImageExporter for images, PdfExporter for PDF, CsvExporter for CSV, ExcelExporter for XLSX, CalcExporter for ODS, HtmlExporter for XHTML, and so on. Printing is done through the WorkbookPrinter class. To export a workbook, create an instance of the respective exporter class, set the necessary properties, and call the Export method. The following code demonstrates how to export a workbook to ODS:

var calcExporter = new CalcExporter();
calcExporter.Export(workbook, @"c:\mysheet.ods");

The following image illustrates a workbook exported to an XHTML file using the HtmlExporter class:

spreadsheet-xhtmlexport

Additional information about the importing and exporting capabilities of MindFusion.Spreadsheet can be found in the online documentation of the component:

http://www.mindfusion.eu/onlinehelp/spreadsheetwinforms/index.htm?Importing.htm
http://www.mindfusion.eu/onlinehelp/spreadsheetwinforms/index.htm?Exporting_0.htm

The trial version of MindFusion.Spreadsheet for WinForms can be downloaded from here:

Download MindFusion.Spreadsheet for WinForms Trial Version

About MindFusion.Spreadsheet for WinForms: A powerful .NET spreadsheet component with great capabilities for editing, styling and formatting large amounts of data.

Create a block diagram editor in JavaScript

In this example, we will create a block diagram editor using MindFusion.Diagramming for JavaScript.

First, let’s add two HTML canvas elements to a page, one for the Diagram control and one for a NodeListView control that will serve as a tool palette:

<!-- The Diagram component is bound to the canvas element below -->

<div style="width:800px; height:600px; overflow:auto; border: 1px solid;">
  <canvas id="diagram" width="2100" height="2100">
    This page requires a browser that supports HTML 5 Canvas element.
  </canvas>
</div>


<!-- NodeListView control -->

<div style="width:130px; height:600px; overflow:none; border: 1px solid rgb(0, 0, 0);">
  <canvas id="nodeList" width="130" height="600"></canvas>
</div>

Next, add references to the necessary script files:

<script src="MicrosoftAjax.js" type="text/javascript"></script>
<script src="MindFusion.Diagramming.js" type="text/javascript"></script>
<script src="BlockDiagEdit.js" type="text/javascript"></script>

In the load handler in the script file, setup the diagram properties and populate the node list with prototype containers and shape nodes, that will represent respectively systems and modules in our block diagrams:

Sys.Application.add_load(function (sender, args)
{
	// create a Diagram component that wraps the "diagram" canvas
	diagram = $create(Diagram, null, null, null, $get("diagram"));
	diagram.addEventListener(Events.nodeCreated, onNodeCreated);
	diagram.addEventListener(Events.linkCreated, onLinkCreated);
	diagram.setLinkHeadShapeSize(3);
	diagram.setLinkHeadShape("Alternative");
	diagram.setAllowInplaceEdit(true);

	// create a NodeListView component that wraps the "nodeList" canvas
	var nodeList = $create(MindFusion.Diagramming.NodeListView,
        null, null, null, $get("nodeList"));
	nodeList.setIconSize(new Size(48, 48));
	nodeList.setDefaultNodeSize(new Size(24, 24));

	var colors = [
		"#FF5555",
		"#55FF55",
		"#5555FF",
		"#FFFFFF"
	];

	// add container to the NodeListView to represent "system" blocks
	for (var i = 0; i < 4; ++i)
	{
		var node = new ContainerNode(diagram);
		node.setBrush(colors[i]);
		nodeList.addNode(node, "System " + (i + 1));
	}

	// add container to the NodeListView to represent "module" blocks
	for (var i = 0; i < 4; ++i)
	{
		var node = new MindFusion.Diagramming.ShapeNode(diagram);
		node.setShape("Rectangle");
		node.setBrush(colors[i]);
		nodeList.addNode(node, "Module " + (i + 1));
	}
});

Handle the nodeCreated event to make containers larger, and start inplace edit operation to let users enter text immediately after dropping a node:

function onNodeCreated(sender, args)
{
	var node = args.getNode();
	if (ContainerNode.isInstanceOfType(node))
	{
		// make containers larger
		var bounds = node.getBounds().clone();
		bounds.width = 100;
		bounds.height = 75;
		node.setBounds(bounds);
	}

	// let user enter text immediately
	diagram.beginEdit(node);
}

When there aren’t anchor points defined, the diagram control snaps link points to nearest point of nodes borders. Let’s automatically align points when links are created to make them straight horizontal or vertical lines if they are already close to being such. Otherwise leave points unchanged to let users draw diagonal lines too:

function onLinkCreated(sender, args)
{
	var link = args.getLink();
	var start = link.getStartPoint();
	var end = link.getEndPoint();

	// make link horizontal if close to being one
	if (Math.abs(start.x - end.x) > 10 && Math.abs(start.y - end.y) < 4)
	{
		end.y = start.y;
		link.setEndPoint(end);
	}

	// make link vertical if close to being one
	if (Math.abs(start.y - end.y) > 10 && Math.abs(start.x - end.x) < 4)
	{
		end.x = start.x;
		link.setEndPoint(end);
	}
}

Here’s the kind of block diagrams and flowcharts you can now draw:
Block diagram

The complete example can be downloaded from this link:
https://mindfusion.eu/_samples/BlockDiagEdit.zip

Enjoy!