ComponentOne ASP.NET MVC Controls
DashboardLayout Class
Members  Example 

C1.Web.Mvc Namespace : DashboardLayout Class
It is a consolidated display of many views and related information in a single place. It is used to compare and monitor a variety of data simultaneously. The different data views are displayed all at once.
Object Model
DashboardLayout ClassLayoutBase Class
Syntax
'Declaration
 
<ScriptsAttribute(Dependencies=System.Object[], ResExtension=".min.js")>
Public Class DashboardLayout 
   Inherits Control
   Implements ITemplate 
[Scripts(Dependencies=System.Object[], ResExtension=".min.js")]
public class DashboardLayout : Control, ITemplate  
Remarks

The DashboardLayout control is a consolidated display of many views and related information in a single place. It is used to compare and monitor a variety of data simultaneously. The different data views are displayed all at once.

The DashboardLayout class initializes the DashboardLayout control and provides properties/methods to configure the control. The following features for the control can be implemented using this class:

1. The drag operation for all the tiles can be enabled/disabled using the AllowDrag property.

2. The AllowHide property displays or hides the hide icon, which is used to toggle the visibility of the tiles.

3. The tiles can even be displayed in the maximized state using the AllowMaximize property. Further, the tiles can be resized to a custom size when the AllowResize property is set to true.

4. The AllowShowAll enables the ShowAll option in each tile, which when clicked shows all the tiles in the control, even the ones which are hidden

5. The tile can be formatted or customized while rendering by handling the OnClientFormatTile event of this class.

6. The resizing and selection of the tiles can be handled by using the OnClientTileActivated and OnClientTileSizeChanged events of this class.

Example
<script type="text/javascript">  
    function formatTile(sender, e) {
        debugger
        var dashboard = sender, // gets the DashboardLayout control
            tile = e.tile; // gets the formatted tile

        switch (tile.headerText) {
            case 'Sales Dashboard': UpdateHeader(e.headerElement);
                break;
            case 'Country': UpdateTileContent(e.tile, e.contentElement);
                break;
        }
    }

    // modify the header title.
    function UpdateHeader(header) {
        var headerText = 'Sales Dashboard for 2018';
        header.querySelector('span.title').innerText = headerText;       
    }

    // update the tile content
    function UpdateTileContent(tile, contentElement) {
        var grid = wijmo.Control.getControl('#salesDashboardFGrid');

        if (grid && grid.selectedItems && grid.selectedItems.length) {
            var selectedRowData = grid.selectedItems[0];
            tile.hostElement.style.backgroundColor = '#009ccc';
            var htmlContent = '<div style="color:white;">Country</div>' +
                '<div style="font-size:72px; text-align: center; color:white;overflow:hidden; text-overflow:ellipsis">' + selectedRowData.Country + '</div>';
            contentElement.innerHTML = htmlContent;
        }
    }
</script>

@(Html.C1().DashboardLayout().Id("custom")
    .AttachAutoGridLayout(aglb =>
        aglb.Orientation(LayoutOrientation.Vertical)
            .MaxRowsOrColumns(6)
            .CellSize(152)
            .Items(isb =>
            {
                isb.Add().Children(cb =>
                {
                    cb.Add().HeaderText("Sales Dashboard")
                        .Content("#salesDashboardFGrid")
                        .ColumnSpan(2).RowSpan(2)
                        .ShowToolbar(true);
                    cb.Add().HeaderText("Country")
                        .ColumnSpan(2).RowSpan(1)
                        .ShowHeader(false).ShowToolbar(false);
                });
            }
          )
    )
    .OnClientFormatTile("formatTile")
)
Inheritance Hierarchy

System.Object
   C1.Web.Mvc.Component
      C1.Web.Mvc.Control
         C1.Web.Mvc.DashboardLayout

See Also

Reference

DashboardLayout Members
C1.Web.Mvc Namespace