Grids
Example of Row Spanning in ASP.NET Core Data Grid Control
This sample demonstrates the Grid component with the row spanning feature. In this sample, you will see multiple rows spanning.
Employee ID | Employee Name | 9.00 AM | 9.30 AM | 10.00 AM | 10.30 AM | 11.00 AM | 11.30 AM | 12.00 AM | 12.30 AM | 1.00 PM | 1.30 PM | 2.00 PM | 2.30 PM | 3.00 PM | 3.30 PM | 4.00 PM | 4.30 PM | 5.00 PM |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 10001 | Davolio | Analysis Tasks | Team Meeting | Testing | Development | Support | Lunch Break | Testing | Development | Conference | Team Meeting | |||||||
| 10002 | Task Assign | Support | Testing | Development | Check Mail | |||||||||||||
| 10003 | Fuller | Check Mail | Analysis Tasks | Support | Team Meeting | Development | ||||||||||||
| 10004 | Leverling | Support | Testing | Check Mail | Conference | Team Meeting | ||||||||||||
| 10005 | Peacock | Task Assign | Check Mail | Support | Team Meeting | Testing | ||||||||||||
| 10006 | Janet | Testing | Support | Team Meeting | Development | |||||||||||||
| 10007 | Suyama | Analysis Tasks | Testing | Development | Testing | Support | Build | Check Mail | ||||||||||
| 10008 | Robert | Task Assign | Development | Testing | Support | Check Mail | Team Meeting | Build | ||||||||||
| 10009 | Andrew | Check Mail | Support | Testing | Development | Team Meeting | Development | |||||||||||
| 10010 | Michael | Task Assign | Analysis Tasks | Testing | Build | |||||||||||||
This feature enables you to span multiple adjacent cells. Use the rowSpan attribute to define how many cells are to be spanned in the QueryCellInfo event.
Additionally, you can freeze columns at specific positions by setting the freeze property to left, right, center and fixed in the column definition.
In this demo, you can see that the Davolio cell is spanned to two rows in the employee named column. Similarly, the Lunch Break cell is spanned to ten rows and three columns in the 1:00 column. Also, the Employee ID column is frozen to the left.
More information on the row spanning can be found in this documentation section.