ASP.NET MVC Controls | ComponentOne
Working with Controls / DashboardLayout / Work with DashboardLayout / Layouts / Manual Grid Layout
In This Topic
    Manual Grid Layout
    In This Topic

    Manual grid layout, as the name suggests, arranges the tiles in the tabular form in the specified manner. The layout is similar to auto grid layout except the fact that you can specify the row and column numbers where a particular tile should be positioned.

    You can set the manual grid layout using the AttachManualGridLayout method provided by the DashboardLayoutBuilder class. Position of the tiles in the manual grid layout is specified using the Row and Column properties of the ManualGridTileBuilder class. Each cell in the manual grid layout can contain multiple controls, and these controls can be grouped together with the help of the ManualGridGroup class. Also, it provides the ManualGridTile class that represents the tiles in the manual grid layout.

    The following image shows how DashboardLayout control appears after adding the manual grid layout. This example uses the sample created in the QuickStart section.

    DashboardLayout control with the manual grid layout

    The following code example demonstrates how to set manual grid layout for the DashboardLayout control.

    Copy Code
    @using ApplicationName.Models
    @model IEnumerable<ProductData>
        .wj-dashboard .wj-flexchart {
            margin: 0px;
            padding: 4px;
            border: none;
            height: 240px;
    <div id="DemoName">
        <p style="font-size:large;">Product Dashboard Demo</p>
          .Bind("Category", "Sales", Model))
         .Bind("ProductName", Model)
         .Series(sers =>
            .Name("Stock Units");
         .Series(sers =>
         .Columns(bl =>
             bl.Add(cb => cb.Binding("ProductID").Align("Center"));
             bl.Add(cb => cb.Binding("ProductName"));
             bl.Add(cb => cb.Binding("Category"));
             bl.Add(cb => cb.Binding("ReorderLevel"));
    <h2>Manual Grid Layout</h2>
    <br />
        .AttachManualGridLayout(mglb => mglb.Orientation(LayoutOrientation.Vertical)
            .Items(isb =>
                isb.Add().Children(cb =>
                    cb.Add().HeaderText("Category Sales")
                    cb.Add().HeaderText("Products Stock")
                isb.Add().Children(cb =>
                    cb.Add().HeaderText("Product Details")