MultiRow Data Grid is a data grid that displays cells in a stacked format, reducing the need to scroll right to view additional columns. While it’s not a familiar spreadsheet format in North America, it’s very popular in Japan, and makes a lot of sense once you understand how it works.

In this video we’ll look at how to get started with implementing the control.




  1. Create a new ASP.NET MVC5 application using the "C1 ASP.NET MVC 5 Web Application" template.

  2. Name it MultiRowIntro.

  3. In ComponentOne ASP.NET MVC application wizard, check "Include C1MVC MultiRow Library".

  4. Click OK. This creates a new MVC5 App with the required C1  libraries referenced and resources registered.

  5. Once the project is created, let’s add the Data Model classes.

  6. Open the Solution Explorer

  7. Right-Click the project.

  8. Choose "Add Entity Data Model" from the context Menu and name it Nwind.

  9. In the Entity Data Model Wizard, select EF Designer from the database and click next.

  10. Create a connection or choose from the existing connections in the next screen. For this example, we’ll choose the NorthWind database.

  11. Click Next.

  12. From the Database Object Screen, select the Orders table.

  13. Click Finish. This adds the Entity Data Model with Orders table to the project.

  14. Rebuild the app. This is a necessary step before using MVC Scaffolders.

  15. We’ll use Scaffolding to generate controller and views. In the solution explorer, right-click the Controllers folder.

  16. Select New Scaffolded Item from the context menu.

  17. From the Add Scaffold window, select C1Scaffolder.

  18. Click Add.

  19. In the Add Scaffold window, select MultiRow and click next.

  20. In the general tab of the scaffolder wizard, set the Controller Name to "OrdersController".

  21. Select "Order" from the model class drop down.

  22. Select "C1NWindEntities" from the Data Context Class dropdown.

  23. Go to the Cells tab and uncheck Auto-generate Columns. This adds the column definition for the control.

  24. Go to Editing tab and select Allow Edit. We’ll set some properties for our MultiRow grid.

  25. In the Grouping tab, select "Show Group Panel".

  26. On the Filtering tab, check "Allow Filtering"

  27. Click on the paging tab, check "Allow Paging," and set the page size to 10.

  28. Go to the Html Attributes tab and set the height property to 480 pixels.

  29. On the Miscellaneous tab, check "Display Collapse Header button"

  30. Click Add. This generates the necessary Controller and view.

  31. On opening the orders controller, we’ll see that code has been generated for the Index action to load the view with Model and Update action to handle data edits respectively.

  32. Close the Controller.

  33. Open the Index.cshtml inside the Orders folder under Views.

  34. Notice that the MultiRow control is defined with the properties we selected in the scaffolder.

  35. The control is bound to the model and the update property has update action set.

  36. The columns are defined per the entity.

  37. Run the app.

  38. We can see the control displays Orders data in a grid, and we can scroll right to see more columns regarding shipper information.

  39. MultiRow Data Grid can display cells in a stacked format, reducing the need to scroll right to view additional columns. Let’s see how to do it.

  40. In the LayoutDefinition, set the header of the default definition to Order.

  41. Add another layout with header Shipper and ColSpan 4.

  42. Inside cells, add the Shipping-related columns.

  43. Set the order layout’s ColSpan to 3.

  44. Save the project and refresh the browser.

  45. The MultiRow now displays the cells in a stacked format. It uses two rows to display Order information and three to display shipping information.

  46. Each record is differentiated with a thick border.

  47. You can use the header button to collapse and expand the column headers.

  48. Use the Column filter dropdown to sort and filter records.

  49. Use the pager to navigate to different pages.

  50. Drag and drop column to group panel in order to group the records inside grid.


 


Learn more about MultiRow