Example of Column Spanning in ASP.NET MVC Data Grid Control
This sample demonstrates the Grid component with the column spanning feature. In this sample, you will see multiple columns 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 PM | 12.30 PM | 1.00 PM | 2.00 PM | 2.30 PM | 3.00 PM | 3.30 PM | 4.00 PM | 4.30 PM | 5.00 PM |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 10001 | Davolio | Testing | Testing | Testing | Development | Team Meeting | Analysis Tasks | Analysis Tasks | Team Meeting | Development | Development | Development | |||||
| 10002 | Buchanan | Development | Development | Check Mail | Task Assign | Support | Support | Testing | Testing | ||||||||
| 10003 | Fuller | Development | Development | Team Meeting | Check Mail | Check Mail | Check Mail | Analysis Tasks | Support | ||||||||
| 10004 | Leverling | Development | Development | Check Mail | Testing | Check Mail | Check Mail | Testing | Testing | Testing | |||||||
| 10005 | Peacock | Development | Team Meeting | Team Meeting | Task Assign | Task Assign | Task Assign | Check Mail | Support | ||||||||
| 10006 | Janet | Development | Development | Team Meeting | Testing | Testing | Support | Support | Team Meeting | ||||||||
| 10007 | Suyama | Support | Support | Build | Check Mail | Analysis Tasks | Analysis Tasks | Testing | Development | Testing | |||||||
| 10008 | Robert | Check Mail | Check Mail | Team Meeting | Build | Task Assign | Task Assign | Task Assign | Development | Support | |||||||
| 10009 | Andrew | Check Mail | Check Mail | Check Mail | Team Meeting | Check Mail | Team Meeting | Team Meeting | Testing | Development | Development | ||||||
| 10010 | Michael | Testing | Testing | Build | Task Assign | Task Assign | Task Assign | Development | |||||||||
This feature enables you to span multiple adjacent cells. Use the colSpan attribute to define how many cells are to be spanned in the QueryCellInfoopens in a new tab 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 employee named Davolio is analyzing data from 9.00 AM to 10.00 AM, so the cells for that time are spanned. Similarly, another employee Buchanan is doing support work from 9.30 AM to 11.00 AM, and the cells are spanned accordingly. Also, the Employee ID column is frozen to the left.
More information on the column spanning can be found in this documentation sectionopens in a new tab.