In the most recent ComponentOne MVC Core Edition release, we added a new TransposedMultiRow control which extends the FlexGrid control. This control is a combination of the new TransposedGrid and Multirow control. It displays the data in a transposed format, i.e., columns represent the data, and rows represent its properties. Since it is also similar to Multirow, a single data item can be represented by multiple columns.
Like the Multirow control, the layout of the TransposedMultiRow can be defined while creating the control using the c1-transposed-multi-row-cell-group for cell groups and c1-transposed-multi-row-cell for simple cells. The layout 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 resulting view will be the transposed version of Multirow.
Once you have created an ASP. NET Core MVC project, add the following NuGet packages to the project:
C1.AspNetCore.Mvc
C1.AspNetCore.Mvc.TransposedMultiRow
After the packages are installed, go to Views/_ViewImports.cshtml file add the required tag helpers at the end of the file:
@addTagHelper *, C1.AspNetCore.Mvc
@addTagHelper *, C1.AspNetCore.Mvc.TransposedMultiRow
Now, go to Views/Shared/_Layout.cshtml file and add the required styles and scripts at the end of the head tag:
<c1-styles />
<c1-scripts>
<c1-basic-scripts />
<c1-transposed-multi-row-scripts />
</c1-scripts>
@model IEnumerable<Orders.Order>
<c1-transposed-multi-row id="ovTransposedMultiRow" class="multirow">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-transposed-multi-row-cell-group header="Order" colspan="2">
<c1-transposed-multi-row-cell binding="Id" header="ID" class="id" width="150" />
<c1-transposed-multi-row-cell binding="Date" header="Ordered" width="150" />
<c1-transposed-multi-row-cell binding="Amount" header="Amount" format="c" class="amount" />
<c1-transposed-multi-row-cell binding="ShippedDate" header="Shipped" />
</c1-transposed-multi-row-cell-group>
<c1-transposed-multi-row-cell-group header="Customer" colspan="3">
<c1-transposed-multi-row-cell binding="Customer.Name" name="CustomerName" header="Customer" width="200" />
<c1-transposed-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="Customer Email" class="email" colspan="2" />
<c1-transposed-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="Address" />
<c1-transposed-multi-row-cell binding="Customer.City" name="CustomerCity" header="City" />
<c1-transposed-multi-row-cell binding="Customer.State" name="CustomerState" header="State" />
</c1-transposed-multi-row-cell-group>
</c1-transposed-multi-row>
Now you know how to use the TransposedMultiRow control in your ASP. NET Core MVC applications. To see the control in action, visit ComponentOne's demos, or learn more in the documentation.