GeezerVison is showing mindfusion.dev — Interactive JavaScript UI Libraries | MindFusion JS Window Host Control

buy now

English

Deutsch

Espanol

Products
- Suites
  - JavaScript
  - WinForms
  - WPF
  - .NET MAUI
  - Java Swing
- Bundles
  - Diagramming
  - Scheduling
- JavaScript
- Blazor
  - Diagram
  - Chart
- Avalonia
  - Diagram
  - Virtual Keyboard
- ASP.NET MVC
  - Diagram
- Java Swing
- WinForms
  - Diagram
  - Scheduler
  - Spreadsheet
  - Chart & Gauge
  - Report
  - Map
  - Virtual Keyboard
  - Dock Control
- .NET MAUI
  - Diagram
  - Calendar
  - Chart
- ActiveX
  - Diagram
- WPF
  - Diagram
  - Scheduler
  - Gantt Chart
  - Spreadsheet
  - Chart & Gauge
  - Report
  - Map
  - Virtual Keyboard
  - UI
- WinUI 3
  - Diagram
- Android
  - Diagram
  - Chart
- iOS
  - Diagram
- WordPress
  - Org Chart Plugin
  - Timetable Plugin
- Applications
  - XML Viewer
  - InSight Diagrammer
- Web Tools
  - Keyboard Creator
  - Shape Designer
Downloads
Support
- E-mail
- Forums
- Documentation
- Samples
- FAQ
- Help Desk
Company
- About Us
- Contacts
- Blog
- Newsletter
- Services
- Clients
- Testimonials
- Join Us
Web store

Home / Components / JavaScript / Window Host

WindowHost Control

The perfect way to render multiple Window instances.

Download Install from npm

A UI Container that Makes a Difference

Light and powerful, the WindowHost provides you with various built-in features to delight your users.

The Window Collection

Each WindowHost can have unlimited number of child Window-s, which are stored in the windows collection-property. You can create them as instances of the Window class or load them through the data property. The activeChild property tells you which is the active Window at the moment.

Online Sample: Json Parser Application

Toolstrip-s

Each WindowHost can render 3 different item strips. The command strip is floating and renders buttons to minimize, maximize, tile and close windows. The minimized strip holds the headers of the minimized windows and the maximized strip - the headers of the maximized ones.

Online Sample: A Project Management Application That Uses the Maximized Toolstrip

Dialogs

The WindowHost exposes methods for rendering the 3 most common type of dialogs: Yes/No, Info and Input dialog. That's a convenient way to provide your users with data regarding the application or collect user input.

Online Sample: Demonstration of the Available Dialogs

Styling and Themes

The appearance of the WindowHost control is set by themes. A set of CSS themes is available with the UI controls, which you can edit as you wish. There is also the cssClass property that lets you apply a custom styling to the WindowHost instances, which takes precedence to styling set by a theme.

JavaScript WindowHost Control with Peach Theme

JavaScript Chat Application with the WindowHost Control

Interaction

You can control the state of the different Window-s hosted by the WindowHost through a set of methods and properties. You can minimize or maximize, show or hide them. You can open or close a given window as well change its Z-order in the stack of the rendered windows.

Online Sample: Windows in the WindowHost Control
API Overview: WindowHost

Events

A set of events is available to inform you about any action the user is performing or has performed on the WindowHost. The actions that trigger events include open and close of a window, change in the window state or change of focus.

Online Sample: Windows and a WindowHost Control
Online Documentation: The WindowHost Class