Features

Overview

Overview

The MultiRow control extends conventional grid layouts by using multiple rows to represent each data item.

Features

Settings

This view uses two rows per record. The layout is divided into three groups: order, customer, and shipper.

Description

The MultiRow control extends conventional grid layouts by using multiple rows to represent each data item.

The MultiRow control allows users to see and edit data in a tabular format, just like other conventional grids.
However, MultiRow is different from these grids in a way that it allows you to bind each data item to multiple rows,
creating form-like interfaces that can display a large number of columns with minimal horizontal scrolling.

The MultiRow control extends the FlexGrid control, so if you know how to use FlexGrid, you will be able to use MultiRow in no time.
The main new property is LayoutDefinition, which takes an object that describes the layout of the grid rows and cells.

The MultiRow control is not a simple replacement for conventional grids; it is a specialized tool that fits some particular scenarios really well.

LayoutDefinition

The LayoutDefinition property specifies the layout of cells in a grid.
It contains a list of cell group objects. Each cell group specifies how many columns the group should span, and the cells that make up each group.

The image below illustrates how a cell group is interpreted and turned into a grid layout:

Here, the group spans three grid columns. It contains six cells with different spans.
When generating the layout, the grid fits as many cells as possible in each row, and wraps to the next row when the group span is reached.
The last cell in each row is automatically expanded to fill Colspan of the group.
The process is similar to wrapping of text to create a paragraph.

The same process is applied to every group in the LayoutDefinition object.

using System.Web.Mvc;
using System.Collections.Generic;
using MultiRowExplorer.Models;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        private readonly ControlOptions _options = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Layout Definition",new OptionItem{Values = new List<string> {"Traditional", "Compact", "Detailed"},CurrentValue = "Compact"}}
            }
        };

        public ActionResult Index(FormCollection collection)
        {
            _options.LoadPostData(collection);
            var model = Orders.GetOrders();
            ViewBag.DemoOptions = _options;
            return View(model);
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;

    var layoutDefinition = optionsModel.Options["Layout Definition"].CurrentValue;
    Action<ListItemFactory<CellGroup, CellGroupBuilder>> layoutDefinitionBuilder;
    if (layoutDefinition == "Traditional")
    {
        layoutDefinitionBuilder = LayoutDefinitionsBuilders.OneLine;
    }
    else if (layoutDefinition == "Compact")
    {
        layoutDefinitionBuilder = LayoutDefinitionsBuilders.TwoLines;
    }
    else
    {
        layoutDefinitionBuilder = LayoutDefinitionsBuilders.ThreeLines;
    }
}

@(Html.C1().MultiRow<Orders.Order>()
    .Id("ovMultiRow")
    .Bind(bl => bl.Bind(Model).DisableServerRead(true))
    .CssClass("multirow")
    .LayoutDefinition(layoutDefinitionBuilder)
)
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
    @if (layoutDefinition == "Traditional")
    {
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text0)</p>
    }
    @if (layoutDefinition == "Compact")
    {
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text1)</p>
    }
    @if (layoutDefinition == "Detailed")
    {
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text2)</p>
    }
}

@section Summary{
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text3)</p>
}

@section Description{
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text4)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text5)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text6)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text7)</p>

<h3 class="semi-bold">@Html.Raw(Resources.MultiRowExplorer.Index_Text12)</h3>
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text8)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text9)
    <img src="@Url.Content(Resources.MultiRowExplorer.Index_Text13)" />
</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text10)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text11)</p>

}