The classes from the MindFusion.Diagramming.Lanes namespace let you develop process maps and lane diagrams, useful in business process planning and reporting. Processes consist of consecutive operations accomplished by people involved, technical installations, means of contact, and flow of information. The MindFusion.Diagramming for JavaScript lane grid features allow indicating and arranging related diagram items in complicated processes and systems, that is, Swim lane diagrams (known as Rummler-Brache diagram), Gantt Charts (planning and scheduling of projects). A lane in the grid can visually contain nodes, links, shapes or images, that represent tasks fulfilled in specified periods of time by people, companies or departments.

The MindFusion.Diagramming.Lanes namespace provides the Grid, Header, Cell and Style classes, and the ResizeType enumeration. These types expose additional properties and methods that let you define your own grids as required by your application logic. Grids can include varying number of lanes, divided into child rows and columns whose intersections form cells. The cell color and style can be customized too.

Use the showLaneGrid property of the Diagram class to display lanes in your application. The laneGrid lets you setup the rows and columns in the grid by defining horizontal and vertical lanes, where each lane can be titled by its own header and/or subheadings. The grid can be resized by setting the columnCount and rowCount properties or by adding headers via the addColumnHeader and addRowHeader methods. A column or row can be divided into child elements by adding subheaders, which lets you form a complex hierarchy of unlimited depth. The intersection of rows and columns can be either a simple cell for bottommost elements in the hierarchy, or a group of cells for parent rows and columns. Cells or cell groups can be accessed via the Grid's get method, that lets you index cells either by their integer positions, or by their Header objects.

The position of the grid and grid headers within the diagram is defined via topMargin and leftMargin, which specify the grid offset relative to the diagram bounds. hookHeaders enables lane headers to be anchored to the left or right side of the control's visible area. The sizes of headers at different levels in the lane hierarchy can be set in a single operation by setting rowHeadersWidths and columnHeadersHeights properties.

The appearance of the lanes grid can be customized further via the headersOnTop poperty, which specifies whether headers should appear on top of the Z-order, and the topLeftAreaStyle specifying the appearance of the grid's top-left corner.

The Grid class provides many miscellaneous properties and methods that can be used to find grid elements, for determining their bounds and for hit-testing: findColumn, findRow, getCellBounds, getCellColumn, getCellFromPoint, getCellRow, getColumn, getRow, getRowIndex, columnHeaderBounds, getColumnIndex, getHeaderBounds, getRowHeaderBounds, getHeaderFromPoint.

Headers in the lanes grid can be customized by using the following members of the Header class:

Member name	Description
height	Gets or sets the height of the header and the related row in the grid.
resizeType	Gets or sets the resize type of the header.
rotateTitle	Gets or sets a value indicating whether rotating of the header caption at 90 degree is enabled.
style	Gets or sets the style of the header.
subHeaders	Gets a collection with the subheaders of the header.
title	Gets or sets the header caption.
width	Gets or sets the width of the header and the related column in the grid.