Multi-tabs Form in JavaScript with Validation

In this blog post we will create a form that spans over several tabs. Each tab contains input fields for a specific type of information. There are placeholders and restrictions for each input field. If the provided data is not correct we display a guiding message and select the first tab that has wrong data. All incorrect fields are outlined with red.

I. General Settings

We will use two files for our form – one is a web page and the other a JavaScript file that will hold all JavaScript code for the sample. They both are names TabForm.

In the web page we add references to the css file that holds the theme we’ve chosen:

 	<link rel="stylesheet" type="text/css" href="themes/light.css">

This is the CSS for the light theme of the MindFusion JavaScript UI controls. There are various themes provided out-of-the-box with the library and you can choose another one.

Then, at the bottom of the web page, before the closing BODY tag we add references to the three JavaScript files that we want to use:

<script src="../Scripts/MindFusion.Common.js" type="text/javascript"></script>
<script src="MindFusion.UI.js" type="text/javascript"></script>
<script src="TabForm.js" type="text/javascript"></script>

The first two of them point to the libraries of the UI controls: MindFusion.Common and MindFusion.UI. The other is a reference to the JS code-behind file.

In order to render the TabControl we need a DIV element. So, we create one and give it an id – that is important:

<div style="position: absolute; top: 0px; left: 0; right: 0; bottom: 0;">
        



<div id="host">
</div>


</div>

We also add a paragraph with an id and red stroke – it will render text, that describes the error fields and the validation message for each one – if the user has provided wrong data.

II. Creating the Tab Control and the Tab Pages

In the code-behind file we first add mappings to the two namespaces we want to use:

var ui = MindFusion.UI;
var d = MindFusion.Drawing

Then we create an instance of the TabControl in code this way:

// Create a new TabControl.
var host = new ui.TabControl(document.getElementById("host"));
host.width = new ui.Unit(70, ui.UnitType.Percent);
host.height = new ui.Unit(70, ui.UnitType.Percent);
host.theme = "light";

We use the id of the DIV element in the constructor of the TabControl Then we use the theme property to refer to the theme that we want to use. The value of the theme property should be the same as the name of the CSS ile that we referenced in the web page. It can point to a custom theme that you have created as long as the names of the file and the property value match.

We create the first TabPage as an instance of the TabPage class:

// Create four templated tab pages and add them to the host's tabs collection.
var tab1 = new ui.TabPage("Owner Details");
// The HTML of the specified page will be set as the innerHTML of a scrollable div inside the tab content element.
tab1.templateUrl = "page1.html";
host.tabs.add(tab1);

We provide the string that will render in the title of the TabPage in the constructor. Then we set the content that the TabPage will have as a url to the web page that contains it e.g. the TabPage loads a content from a page specified with templateUrl Here is the code for the first page:

<div style="padding: 10px;">
        <label for="fname">First Name: </label>
        <input type="text" id="fname" name="First name" placeholder="John" title="Your first name" required"="">
</div>




<div style="padding: 10px;">
        <label for="lname">Last Name: </label>
        <input type="text" name="Last name" id="lname" placeholder="Smith" title="Your family name" required="">
</div>




<div style="padding: 10px;">
        <label for="citizen_id">Citizen Id:</label><input id="citizen_id" type="number" name="Citizen number" size="10" pattern="[0-9]{10}" min="1000000000" max="9000000000" placeholder="0123456789" title="10 digits" required="">
</div>


In terms of HTML, we have provided each input element with an id, a placeholder value and the necessary restrictions that will validate its content. We strictly use and follow the Validation API of JavaScript, which you can check here: https://www.w3schools.com/js/js_validation_api.asp and here https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation.

III. Data Submission and Validation

On the last tab of the form, we have placed a submit button:

<div style="padding: 10px;">
        <button id="submit">Send Data</button>
</div>

We wire the event handler of the click action for this button in the contentLoad event of the fourth tab, where the button is:

tab4.contentLoad.addEventListener(tabLoad);
..........................
..........................
function tabLoad(sender, args) {

    let current_datetime = new Date();
    let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate();
    sender.element.querySelector("#start").value = formatted_date;
    sender.element.querySelector("#submit").addEventListener("click", function () {
    submitData(sender);
    });
}

In the event handler we get the current date and format it the way the default DateTime picker HTML control expects to get it. We get each input control through its id and the querySelector of the HTML Document object. The sender in this case is the fourth tab or tab4.

The method that validates the content is submitData:

function submitData(sender) {
    var txt = "";

    var inputObj = tab4.element.querySelector("#start");

    if (!inputObj.checkValidity()) {
        txt += inputObj.name + ": ";
        txt += inputObj.validationMessage + "
";
        inputObj.style["border-color"] = "red";
        host.selectedItem = tab4;
        dataIsCorrect = false;
    } else
        inputObj.style["border-color"] = "gray";
        ....................................

We use querySelector once again to get the input fields on each page one by one. For each one we see if the validity check has failed. If yes, we outline this field in red and append the validation message to a text variable.

We walk through all tabs and all input fields in this same manner and in reverse order. Our aim is that the first tab with error gets selected, even if there are errors in fields further in the form.

Note that if the field is OK we set its border to the default color. This way we reset the appearance of fields that were previously wrong but the user has corrected.

Finally, we assign the text to the content of the paragraph that renders text in red:

...............................
document.getElementById("error").innerHTML = txt;  

    if (txt.length === 0)
        confirmData();

If no errors have been detected – that means the error text is an empty string – we submit the data. The data submission is handled by the confirmData method:

function confirmData() {

    //first tab
    tab1.element.querySelector("#fname").value = "";
    tab1.element.querySelector("#lname").value = "";
    tab1.element.querySelector("#citizen_id").value = "";
    ........................................
    ........................................
     //fourth tab
    tab4.element.querySelector("#duration").value = "";
    let current_datetime = new Date();
    let formatted_date = current_datetime.getFullYear() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getDate();
    tab4.element.querySelector("#start").value = formatted_date;

    ui.Dialogs.showInfoDialog("Confirmation", "Your info has been submitted!", null, host.element, host.theme);

}

We reset the values of all input fields and we show an instance of MindFusion InfoDialog to inform the user that their data has been successfully collected.

You can download the source code of the sample and all MindFusion themes and libraries used from this link:

http://mindfusion.eu/samples/javascript/ui/TabForm.zip

You can ask technical question about MindFusion JavaScript developer tools at the online forum at https://mindfusion.eu/Forum/YaBB.pl.

About MindFusion JavaScript UI Tools: MindFusion UI libraries are a set of smart, easy to use and customize JavaScript UI components. Each control boasts an intuitive API, detailed documentation and various samples that demonstrate its use. The rich feature set, multiple appearance options and numerous events make the UI controls powerful tools that greatly facilitate the programmers when building interactive JavaScript applications. MindFusion UI for JavaScript is part of MindFusion JavaScript Pack. You can read details at https://mindfusion.eu/javascript-pack.html.

Virtual Keyboard Controls Added To MindFusion WinForms/WPF Packs

MindFusion UI controls suite now includes a virtual keyboard.

MindFusion UI controls suite now includes a virtual keyboard.

Dear MindFusion current and future clients,
Dear FreezePro clients,

MindFusion is pleased to announce that as of April 2016 it has acquired FreezePro Virtual Keyboard components, which will be released as part of MindFusion WinForms/WPF controls suites. We want to use this opportunity to thank all MindFusion and FreezePro clients for the loyalty – you’ve chosen us over multiple competitive products and we believe you are satisfied with your choice.

To please you even more we offer you special prices for upgrading to MindFusion WinForms/WPF pack. You get a 30% discount on the difference between the price of a component’s license you own and the price of the WinForms/WPF pack license you want to buy. MindFusion clients who already own a WinForms/WPF Pack license get the Virtual Keyboard component free of charge.

If you want to use the preferential upgrade prices please send an e-mail to info@mindfusion.eu no later than May 31st, 2016.

If you have technical questions about any of the components please contact MindFusion at support@mindfusion.eu. Use the same email for questions about licensing or transfer of intellectual property rights.

Welcome to the bigger MindFusion family!

MindFusion WPF Pack

MindFusion.WinForms Pack 2014.R3

MindFusion is pleased to announce the release 2014.R3 of the Pack for WinForms component suite. Here is an overview of the new features:

diagram16x16MindFusion.Diagramming

Export to Visio 2013 files
The new Visio2013Exporter class lets you export the contents of Diagram and DiagramDocument objects to Visio 2013 VSDX files. You must add a reference to the MindFusion.Diagramming.Export.Visio.dll assembly beforehand. Further details on how to use the Visio2013Exporter can be found in the forum or the online help.

Headers and Footers in PDF
You can now add a header and a footer to all exported to PDF pages. Their content and font are customizable – use HeaderFormat, HeaderFont, FooterFormat and FooterFont to do it.

The PdfExporter

The PdfExporter

Calendar-16x16MindFusion.Scheduling

New Holiday Providers
You can use one of the new holiday providers, added to the MindFusion.HolidayProviders.dll assembly – FranceHolidayProvider, GermanyHolidayProvider, RussiaHolidayProvider, and UKHolidayProvider.

Miscellaneous

  • A new Drawing event enables custom drawing of calendar elements before their default rendering.
  • Improved support for partial databinding.

Spreadsheet-16x16MindFusion.Spreadsheet

Export to XLSX (Office Open XML) format
Use the new ExcelExporter class to export MindFusion.Spreadsheet Workbook objects to Excel. To export a workbook to XLSX, create an instance of the ExcelExporter class and call its Export method, passing the Workbook object as parameter.

Export to ODS (OpenDocument Spreadsheet) format
The new CalcExporter class lets you export MindFusion.Spreadsheet Workbook objects to the OpenDocument format. To export a workbook, create an instance of the CalcExporter class and call its Export method, passing the Workbook object as parameter.

Export to XHTML and MHTML format
Two new classes – HtmlExporter and MhtmlExporter – let you export MindFusion.Spreadsheet Workbook objects to (X)HTML and MHTML files. To export a workbook, create an instance of the respective exporter class and call its Export method, passing the Workbook object as parameter.

Export to XHTML.

Export to XHTML.

Moving cell ranges
You can move cells and cell ranges programmatically as well interactively. In order to move a column/row programmatically you should call one of the Move overloads of the of the ColumnCollection or RowCollection classes respectively, and specify the column/row to move and the desired location. To move columns or rows interactively, select the columns or rows entirely, click on any of the selected column or row headers and drag.

Find and replace
You can now use a variety of methods to search and replace texts. For searching, use the Find and FindAll methods. For replacing text use Replace and ReplaceAll. The new FindReplaceForm class (contained in the MindFusion.Spreadsheet.WinForms.StandardForms.dll assembly) can be used to facilitate search and replace operations inside a workbook.

Improved in-place editing
In-place formula editing has been extended with automatic literal, string, cell and cell range coloring
and context-sensitive tooltip information for functions.

In-place editing.

In-place editing.

Miscellaneous

  • The parameters of the Export methods of some exporters have been reordered to improve consistency. Now the Worksheet/Workbook being exported is always the first argument.
  • The HyperlinkForm constructors now require an addition argument of type Workbook.
  • New PageOrientation property added to the PdfExporter class.

uiMindFusion.UI

DockControl
Layout serialization has been added to the DockControl.

The trial version is available for direct download from this link:

Download MindFusion.WinForms Pack 2014.R3

If you run into problems with any of the components, please let us know. We shall be glad to assist you. MindFusion is proud with its excellent technical support – the majority of the questions are answered within hours of receiving them.

About MindFusion.WinForms Pack: A set of five WinForms programming components that provide your application with a rich choice of diagramming, charting, scheduling, mapping, reporting and gauge features. The tools are very easy to implement and use. They boast intuitive API and various step-by-step tutorials to get you started. Both online and offline documentation is available.

A sample browser presents you with all the samples for each control to let you easily navigate to what you need. You can check some of the features of each component right now if you look at the online demos:

Visit the features – page of the components for more information about their capabilities:

You can check the prices and licensing scheme here. All components are royalty-free.

MindFusion Pack for WinForms 2014.R2

MindFusion has just released Pack for WinForms 2014.R2. The most important new features in the components are listed below:

diagram16x16MindFusion.Diagramming

Resize of multiple nodes

Now you can resize multiple selected nodes simultaneously – just set the AllowMultipleResize property to true. When enabled, dragging a corner or any side adjustment handle of a node, resizes all nodes in the selection.

Visio2013Importer improvements

  • The Item argument of ImportItem event handlers is now pre-set to a DiagramItem instance created for the imported Visio shape, letting you avoid parsing some standard data such as Bounds or Text. You can either modify this item’s properties, or replace it with a new instance of a different type.
  • several bugs and crashes have been fixed

Miscellaneous

  • LinkLabels are now copied by the DiagramLink copy constructor and clipboard methods.
  • DiagramView.ZoomFactor setter no longer automatically aligns its value to ZoomControl zoom steps. This avoids imprecise ZoomToFit results.
  • a few API changes have been made.

Spreadsheet-16x16MindFusion.Spreadsheet

The new version fixes several bugs and offers improved binary and XML serialization. The new version is not compatible with old binary and XML formats.

UI-16x16MindFusion.UI

A DockControl (beta version) has been added to the pack.

The dock control for WinForms

The dock control for WinForms

The trial version is available for direct download from this link:

Download MindFusion.WinForms Pack 2014.R2

If you run into problems with any of the components, please let us know. We shall be glad to assist you. MindFusion is proud with its excellent technical support – the majority of the questions are answered within hours of receiving them.

About MindFusion.WinForms Pack: A set of five WinForms programming components that provide your application with a rich choice of diagramming, charting, scheduling, mapping, reporting and gauge features. The tools are very easy to implement and use. They boast intuitive API and various step-by-step tutorials to get you started. Both online and offline documentation is available. A sample browser presents you with all the samples for each control to let you easily navigate to what you need. You can check some of the features
of each component right now if you look at the online demos:

Visit the features – page of the components for more information about their capabilities:

You can check the prices and licensing scheme here. All components are royalty-free.

MindFusion.WinForms Pack, 2013.R2

MindFusion has released a new version of its pack for WinForms. Here is an overview of the new features:

chartMindFusion.Charting

Pie chart interactions

You can now resize every 2D or 3D pie chart by dragging the border between each two adjacent pieces with the mouse. The HitTestAngleOffset property lets you specify the deviation, in degrees, at which a click around the pieces border would still be considered a click on the border.

Mouse dragging in a pie chart.

Mouse dragging in a pie chart.

Support for undefined data values

You can add null (undefined) data values to all charts. The HandleEmptyValue property and the HandleEmptyValue enumeration specify the various ways null values can be handled.

ToolTips

You can now show tooltips for all chart types. In Area charts, tooltips can be displayed for every section between each two adjacent points.

Themes

Chart themes are now represented as XML files and we provide you with an initial set of 8. You can use the SaveTheme and LoadTheme methods to save/load a theme. There is also a theme editor control that lets you create, save and preview themes fast and easy.

Major/minor axis ticks

You can divide all chart axes more precisely using the new MajorTickLength and MinorTickLength properties. When their value is greater than zero, ticks are drawn not only at the axis intervals but also among them. You can customize the number of minor ticks with the MinorTicksPerInterval property.

Miscellaneous

  • Hit testing has been imrpoved in 3D cylinders and area charts
  • custom number formatting has been added to all numeric labels
  • several API changes were introduced

diagram16x16MindFusion.Diagramming

Support for Mono

You can use MindFusion.Diagramming component under the Mono runtime for OSX or Linux. A single version of the mindfusion.* assemblies can be referenced by both Mono and Microsoft .NET applications. The control detects what runtime has loaded it, and provides alternative implementations for features that are currently missing from Mono.

Custom measure units

The type of the MeasureUnit property has been changed from GraphicsUnit enum to MeasureUnit class. This class lets you define custom units by specifying their dots-per inch resolution, a string name, and number of standard divisions for display in the Ruler control. There are two new predefined units available out of the box: Centimeter and WpfPoint.

Shape control points

You can parameterize Shape formulas by associating control points with Shape objects. Each control point is passed to the shape script as a named variable. You can also specify the default, min and max coordinates for each parameter via the ShapeControlPoint constructor, and whether to treat its values as percents or fixed offset.

ContainerNode improvements

  • Child nodes are now drawn by their containers; when containers overlap, the children of a lower container cannot appear in front of the upper container anymore;
  • The ClipChildren property specifies whether to clip child items to container’s boundaries;
  • The ZIndex property no longer changes automatically when dropping nodes into a container;
Container nodes in Diagramming for WinForms

Container nodes in Diagramming for WinForms

Import OpenOffice Draw files

The DrawImporter class can import .odg files, created by the OpenOffice Draw vector graphics editor. In order to use it, you must add a reference to the MindFusion.Diagramming.Import.Draw.dll assembly. Various overloads of the Import method can be used to import the OpenOffice drawing into a DiagramDocument whose pages correspond to the Draw pages, or into a single Diagram whose content is merged from all imported pages.

PdfExporter improvements

  • Improved handling of clip regions in custom drawing code;
  • PdfExporter now honors the target Rectangle property of linear gradients;
  • PDF shadings now include all colors from a ColorBlend;

New events

  • The SetSelfLoopShape event is raised when a link becomes a self-loop, giving you a chance to set a custom shape for the link;
  • QueryAlignTarget event is raised to determine if a node should be used as alignment guide target when AutoAlignNodes is enabled;

Report-16x16 MindFusion.Reporting

Several bug fixes and improvements.

Calendar-16x16 MindFusion.Scheduling

Several new members have been added:

  • Calendar.FilterItem event
  • Calendar.SetViewport method
  • ResourceViewSettings.EnableCollisions property

You can read more details about the new features of each component at the forum. Use the link below to download the trial version of the control:

Download MindFusion.WinForms Pack 2013.R2

If you run into problems with any of the components, please let us know. We shall be glad to assist you. MindFusion is proud with its excellent technical support – the majority of the questions are answered within hours of receiving them.

About MindFusion.WinForms Pack: A set of five WinForms programming components that provide your application with a rich choice of diagramming, charting, scheduling, mapping, reporting and gauge features. The tools are very easy to implement and use. They boast intuitive API and various step-by-step tutorials to get you started. Both online and offline documentation is available. A sample browser presents you with all the samples for each control to let you easily navigate to what you need. You can check some of the features of each component right now if you look at the online demos:

Visit the features – page of the components for more information about their capabilities:

You can check the prices and licensing scheme here. All components are royalty-free.

MindFusion Pack for Silverlight 2013.R1

MindFusion has released a new version of its Silverlight controls suite. There are new features in many of the controls, here are details:

Visual Studio 2012 Support

New assemblies for all components targeting Silverlight 5 are available. Additionally all samples provide versions for Visual Studio 2012.

chartMindFusion.Charting

Radar and Polar charts
The Silverlight charting control adds a brand new types of charts – radar and polar charts. They support unlimited number of data series, 4 label types at the inner and outer axes, spiderweb, scatters and many more.

Radar chart

Radar chart

Hit testing
The new HitTest method returns a list of all ChartElement objects, which contain the specified point. Each chart type has its own ChartElement-derived class, which exposes properties for the hit object – data, labels, value etc.

Visual Effects
All chart types support the System.Windows.Media.Effects.DropShadowEffect and System.Windows.Media.Effects.Blur effect. Use the Effect property to specify the chosen effect.

diagram16x16MindFusion.Diagramming

Node Effects
You can apply to nodes two visual effects, represented by the GlassEffect and AeroEffect classes. Effects can be added, removed or modified at any time and this will immediately reflect on the diagram. Effects of different types can be applied simultaneously.

Themes and Theme Editor
A theme in DiagramLite is a set of styles, each associated with a specific item type. When the theme is applied to a diagram, the styles registered in the theme affect all objects of their associated type. Styles are associated with item types within the theme through the RegisterStyle method. The package also includes a Theme Editor tool that provides simple visual environment for theme creation and modification. There are also several predefined themes available in the Themes subfolder of the installation root folder.

Diagram documents and tabbed views
The DiagramDocument class represents a collection of diagram pages or sheets, represented by DiagramPage objects. New pages can be added to the document and existing pages can be removed and reordered via the Pages collection.

The new TabbedDiagramView can be used to display DiagramDocument objects. The view displays a tab for each page in the document. You can change the active page, add and remove pages as well rearrange them by dragging with the mouse.

One-way graph Layout
The OneWayLayout class ensures that links enter into nodes from the same general direction and exit them from the opposite side. If the graph contains cycles, some links bend around the nodes to keep the enter/exit direction consistent. The algorithm aims to minimize the number of such links.

One Way Graph Layout

One Way Graph Layout

Multiple labels per link
The LinkLabel class allows multiple captions to be displayed for a single DiagramLink object. Link labels provide a set of properties allowing full customization of their display and positioning. The labels support automatic arrangement.

Layers
Items can now be assigned to layers, and layers can be hidden, locked or moved up/down in the Z order as a group. Set the LayerIndex property of items to associate them with layers in the Diagram.Layers collection. The Layer objects provide Visible, Locked and ZIndex properties, which affect all items in the respective layer. Layers also expose a Title property shown in the LayerListView control.

Layer list control
The LayerListView control provides user interface for working with Layer objects. The control displays a list of all layers in a specified Diagram with a title and an overview area, and also allows editing of layer’s Title, Visible and Locked properties and choosing the Diagram’s currently active layer.

Magnifier
The new magnifier tool lets you interactively zoom in (or out) portions of the diagram by holding down a modifier key or pressing a mouse button. The magnifier’s zoom factor and size are
customizable.

The Magnifier Tool

The Magnifier Tool

Report-16x16MindFusion.Reporting

Side-By-Side Containers
You can arrange items in the report parallelly by putting them inside the new SideBySideContainer report item. One of the uses is to display two (or more) data ranges next to each other.

Miscellaneous

  • New DefaultEncoding property in PdfExporter;
  • New Median aggregate function;
A sample report

A sample report

Calendar-16x16MindFusion.Scheduling

Improved item presenter
The ItemPresenter class now provides the start and end time of the represented item fragment through the new StartTime and EndTime properties. In addition, derived classes can override the new OnStartTimeChanged, OnEndTimeChanged, and OnItemPropertyChanged methods to get notified when the StartTime or EndTime properties change or when any property of the underlying item changes.

Improved recurrence
The Recurrennce class exposes a new event – ValidateOccurrence, which can be used to validate and customize the occurrences of a recurrence pattern.

A sample schedule

A sample schedule

You can read further details about the release at the forum. A trial version is available for download from here:

Download MindFusion Silverlight Pack R1.2013

Technical Support
You are welcomed to post your questions at the forum section of the respective product. You can also use the help desk or the support e-mail. MindFusion puts special effort in providing fast and competent technical support to everyone using our products.

About MindFusion.Silverlight Pack: A set of advanced Silverlight components that help you build your business application easy and on time. The tools provide you with a complete set of features for creating, editing and rendering complex flowcharts, charts, diagrams, calendars, maps, schedules and reports. A set of gauges and UI elements is also included. Each component offers various samples, tutorials and detailed documentation. The controls offer simple and intuitive API, completely customizable appearance, numerous input/output options and a rich event set. Each tool has been thoroughly tested to guarantee that you and your application get the high quality and performance you deserve.

MindFusion Pack for ASP.NET R1.2013

MindFusion.ASP.NET Pack R1.2013 has just been released. We have added styles and themes to the Diagramming tool, interactive resize of items in the scheduling control, numerous UI components and more. Here are the details:

diagram16x16Diagramming for WebForms

Styles and themes

You can modify now the appearance of a diagram through styles. Each style is a collection of properties, which can be applied to a given diagram item or to all items of a given type.

A Theme is a collection of styles. Each style in the theme is associated with the diagram items of a specific type and affects all items of this type. Themes can be saved and loaded to / from XML files. You can create custom themes using the Theme Editor tool.

The Slate Theme

The Slate Theme

Node effects

Nodes support two visual effects – a GlassEffect and an AeroEffect. To apply an effect, you should create an instance of the respective class, set its properties and add the instance to the Effects collection of the node. Effects can be added, removed or modified at any time and this will reflect immediately on the diagram.

One-way graph layout

The OneWayLayout class ensures that links enter into nodes from the same general direction and exit them from the opposite side. If the graph contains cycles, some links bend around the nodes to keep the enter/exit direction consistent. The algorithm aims to minimize the number of such links.

One Way Layout

One Way Layout

Multiple labels per link

The LinkLabel class lets you display multiple captions for a single DiagramLink object. Link labels have a variety of properties for full customization of their display and positioning.

Layers

Diagram items can be assigned now in layers and layers can be hidden, locked, moved up/down in the Z-order as a group. Use the LayerIndex property of items to associate them with a given layer in the Diagram.Layers collection.

Traffic map drawn with MindFusion.Diagramming for ASP.NET

Traffic map drawn with MindFusion.Diagramming for ASP.NET

Parallel layouts

The .NET 4 version of NetDiagram takes advantage of the Task Parallel Library (TPL) to enable parallelism on the different layout algorithms. Set the EnableParallelism property on the Layout class to true to enable arranging different subgraphs on different threads to possibly improve performance on multiprocessor systems.

Magnifier tool

The new magnifier tool allows users to interactively zoom in (or out) portions of the diagram by holding down a modifier key or pressing a mouse button. The magnifier’s zoom factor and appearance can be customized.

The Magnifier Tool

The Magnifier Tool

Miscellaneous

  • Automatic postback mode
  • Enhancements in Canvas mode
  • Enhancements in ImageMap mode
  • The value of the DiagramItem.ZIndex property is no longer required to be unique and
    smaller than the number of items
  • and many more.

Calendar-16x16Scheduling for WebForms

  • Interactive resize of items is now available in all views.
  • Some of the CSS classes have been renamed to provide better consistency across themes.
  • The bundled jQuery version has been upgraded to 1.9.
MonthRange view

MonthRange view

uiMindFusion.UI for WebForms

The following new components have been added to MindFusion.UI for WebForms:

  • Button – a customizable control, which can act as a regular HTML button, Link or
    ImageButton;
  • CheckBox – a customizable control, which can act as a two- or three state checkbox or
    Radio button;
  • DropDown – a drop-down list control that supports binding;
  • MaskTextBox – represents a text input control that constrains the user input to a
    specified mask;
  • PasswordBox – represents a text input control with password protection;
  • Slideshow – provides the ability to display a set of images as a slideshow;
  • TextBox – represents a customizable text input control;
  • Zoom – represents an image zoom tool.
Data input form

Data input form

You can read more about the new features of the components in the ASP.NET Pack at the forum. The new version is available for download from this link:

Download MindFusion Pack for WebForms R1.2013

About MindFusion.WinForms Pack: A set of WebForms components that add great variety of features to your ASP.NET application with a few mouse clicks. The pack contains advanced components for diagramming, scheduling, charting and UI (Accordion, ColorPicker, TabControl, Window, WindowHost, DockControl, Button, Slideshow, Zoom and more). Each tool boasts easy to learn and use API and is quickly integrated into any web application that targets the ASP.NET platform. The controls support numerous options for styling, data import / export, user interaction and offer rich event set. There are plenty of samples and step-by-step tutorials as well detailed documentation.

Use the features page for each of the tools to find out more about its capabilities and
the numerous ways it can boost your performance and speed up the development of your application:

Visit the buy page for details on the licensing scheme and prices. If you have questions please contact us. We shall be happy to assist you.