Introducing TransposedMultiRow for ASP .NET Core MVC

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.

How to Add the TransposedMultiRow Control

1. Once you have created an ASP. NET Core MVC project, add the following NuGet packages to the project:

2. C1.AspNetCore.Mvc

3. C1.AspNetCore.Mvc.TransposedMultiRow

4. After the packages are installed, go to Views/_ViewImports.cshtml file add the required tag helpers at the end of the file:

5. @addTagHelper *, C1.AspNetCore.Mvc

6. @addTagHelper *, C1.AspNetCore.Mvc.TransposedMultiRow

7. 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>

4. Now, you can add TransposedMultirow control to your project and bind it to a Model in a cshtml file:

@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>

5. Run the project using the F5 key, and the following output will be displayed:

Next Steps: Moving Forward with the TransposedMultiRow for ASP. NET Core MVC

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.