# TransposedMultiRow Layout Definition

Learn how to define layouts of TransposedMultiRow grids in this documentation topic

## Content

The **TransposedMultiRow** control extends the **FlexGrid** control to display data using a transposed layout, where columns represent data items and rows represent item properties like in the **TransposedGrid** control.

But in contrast to the **TransposedGrid** control, the **TransposedMultiRow** control uses multiple columns to represent each data item. It makes possible to create form-like interfaces that can display a large number of rows with minimal vertical scrolling.

Like the **MultiRow** control, the **TransposedMultiRow** control also allows to customize layout using the property **layoutDefinition**. This property has the same meaning and usage as in the **MultiRow** control although the resulting view will looks differently because of transposing.

The **layoutDefinition** property specifies the layout of the cells in the grid. It contains an array 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:
![TransposedMultiRow LayoutDefinition illustrated](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/grid/transposedmultirow-layoutdefinition.png)
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.

When all groups are ready, the grid calculates the number of columns per record to the maximum **colspan** of all groups, and adds columns to each group to pad their width as needed. As a result, each record has the same number of columns. It is the only difference from the **MultiRow** control where each record has the same number of rows.

## Code Example
```javascript
import { TransposedMultiRow } from '@mescius/wijmo.grid.transposedmultirow';

var multirow = new TransposedMultiRow('#trnMultirow', {
    itemsSource: appData.orders,
    layoutDefinition: [
        {
            header: 'Order', colspan: 3, cells: [
                { binding: 'id', header: 'ID', rowspan: 2, cssClass: 'id' },
                { binding: 'amount', header: 'Amount', format: 'c', rowspan: 2, cssClass: 'amount' },
                { binding: 'date', header: 'Ordered' },
                { binding: 'shippedDate', header: 'Shipped' }
            ]
        },
        {
            header: 'Customer', colspan: 3, cells: [
                { binding: 'customer.name', header: 'Name' },
                { binding: 'customer.address', header: 'Address', rowspan: 2 },
                { binding: 'customer.city', header: 'City', dataMap: cityMap },
                { binding: 'customer.email', header: 'EMail', rowspan: 2, cssClass: 'email' },
                { binding: 'customer.state', header: 'State', width: 45 },
                { binding: 'customer.phone', header: 'Phone' },
                { binding: 'customer.zip', header: 'Zip' },
            ]
        },
        {
            header: 'Shipper', colspan: 3, cells: [
                { binding: 'shipper.name', header: 'Shipper' },
                { binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
                { binding: 'shipper.express', header: 'Express' }
            ]
        }
    ]    
});
```

Please note that the cells support all the usual **Column** properties except the **width** property. This property can be specified in the **layoutDefinition** object but the grid will ignore it because it is supposed that the cells in each rows should have the same width.