Example of Default Sorting in ASP.NET MVC Gantt Chart Control
This sample demonstrates the Gantt multi-sorting feature. To sort two or more columns, hold the CTRL key, and click the column header.
2ID | 1Name | Start Date | End Date | Duration | Progress |
|---|---|---|---|---|---|
| 27 | Exterior finishing | 5/27/2024 | 6/6/2024 | 9 days | 15 |
| 29 | Add water resistive barrier | 5/30/2024 | 6/3/2024 | 3 days | 0 |
| 28 | Cover outer walls and roof in OSB | 5/27/2024 | 5/29/2024 | 3 days | 30 |
| 30 | Install roof shingles | 6/4/2024 | 6/6/2024 | 3 days | 30 |
| 31 | Install windows | 6/4/2024 | 6/6/2024 | 3 days | 0 |
| 48 | Final acceptance | 7/11/2024 | 7/16/2024 | 4 days | 15 |
| 50 | Cleanup for occupancy | 7/15/2024 | 7/16/2024 | 2 days | 0 |
| 49 | Final inspection | 7/11/2024 | 7/12/2024 | 2 days | 30 |
| 51 | Property handover | 7/16/2024 | 7/16/2024 | 0 days | 0 |
| 45 | Flooring | 7/8/2024 | 7/10/2024 | 3 days | 15 |
| 47 | Tile floor | 7/8/2024 | 7/10/2024 | 3 days | 0 |
| 46 | Tile kitchen, bathroom and entry walls | 7/8/2024 | 7/10/2024 | 3 days | 30 |
| 14 | Foundation | 4/23/2024 | 5/8/2024 | 12 days | 23 |
| 19 | Cure basement walls | 5/3/2024 | 5/8/2024 | 4 days | 30 |
| 16 | Dig footer | 4/24/2024 | 4/25/2024 | 2 days | 0 |
| 15 | Excavate for foundations | 4/23/2024 | 4/25/2024 | 3 days | 30 |
| 17 | Install plumbing grounds | 4/26/2024 | 5/1/2024 | 4 days | 30 |
| 18 | Pour a foundation and footer with concrete | 5/2/2024 | 5/2/2024 | 1 day | 0 |
| 20 | Framing | 5/9/2024 | 5/24/2024 | 12 days | 20 |
| 23 | Add ceiling joists | 5/14/2024 | 5/16/2024 | 3 days | 30 |
| 21 | Add load-bearing structure | 5/9/2024 | 5/13/2024 | 3 days | 30 |
| 26 | Frame floor decking | 5/22/2024 | 5/24/2024 | 3 days | 30 |
| 25 | Frame floor walls | 5/22/2024 | 5/24/2024 | 3 days | 30 |
| 22 | Install floor joists | 5/14/2024 | 5/16/2024 | 3 days | 0 |
| 24 | Install subfloor panels | 5/17/2024 | 5/21/2024 | 3 days | 0 |
| 38 | Interior finsihing | 6/12/2024 | 7/5/2024 | 18 days | 20 |
| 42 | Apply primer | 6/25/2024 | 6/27/2024 | 3 days | 0 |
| 40 | Install drywall panels | 6/17/2024 | 6/19/2024 | 3 days | 0 |
| 39 | Install insulation | 6/12/2024 | 6/14/2024 | 3 days | 30 |
| 44 | Install modular kitchen | 7/3/2024 | 7/5/2024 | 3 days | 30 |
| 43 | Paint wall and ceilings | 6/28/2024 | 7/2/2024 | 3 days | 30 |
| 41 | Spackle | 6/20/2024 | 6/24/2024 | 3 days | 30 |
| 10 | Project approval and kick off | 4/16/2024 | 4/16/2024 | 0 days | 0 |
| 5 | Project estimation | 4/8/2024 | 4/15/2024 | 6 days | 15 |
| 6 | Develop floor plan for estimation | 4/8/2024 | 4/10/2024 | 3 days | 30 |
| 8 | Estimation approval | 4/15/2024 | 4/15/2024 | 0 days | 0 |
| 7 | List materials | 4/11/2024 | 4/15/2024 | 3 days | 0 |
| 1 | Project initiation | 4/2/2024 | 4/5/2024 | 4 days | 0 |
| 2 | Identify Site location | 4/2/2024 | 4/2/2024 | 0 days | 30 |
| 3 | Perform soil test | 4/2/2024 | 4/5/2024 | 4 days | 0 |
| 4 | Soil test approval | 4/5/2024 | 4/5/2024 | 0 days | 30 |
| 9 | Sign contract | 4/16/2024 | 4/16/2024 | 1 day | 30 |
| 11 | Site wwork | 4/17/2024 | 4/22/2024 | 4 days | 15 |
| 12 | Clear the building site | 4/17/2024 | 4/18/2024 | 2 days | 30 |
| 13 | Install temporary power service | 4/19/2024 | 4/22/2024 | 2 days | 0 |
| 32 | Utilities | 5/27/2024 | 6/11/2024 | 12 days | 18 |
| 35 | Electrical utilities | 6/4/2024 | 6/6/2024 | 3 days | 30 |
| 37 | Install bathroom fixtures | 6/7/2024 | 6/11/2024 | 3 days | 30 |
| 34 | Install HVAC | 5/30/2024 | 6/3/2024 | 3 days | 0 |
| 33 | Install internal plumbing | 5/27/2024 | 5/29/2024 | 3 days | 30 |
| 36 | Natural gas utilities | 6/7/2024 | 6/11/2024 | 3 days | 0 |
Mar 25, 2024 | Mar 31, 2024 | Apr 07, 2024 | Apr 14, 2024 | Apr 21, 2024 | Apr 28, 2024 | May 05, 2024 | May 12, 2024 | May 19, 2024 | May 26, 2024 | Jun 02, 2024 | Jun 09, 2024 | Jun 16, 2024 | Jun 23, 2024 | Jun 30, 2024 | Jul 07, 2024 | Jul 14, 2024 | Jul 21, 2024 |
|---|
M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S |
|---|
The sorting feature enables you to order data in a particular direction. It can be enabled by setting AllowSorting to true.
To sort a Gantt column, click the column header. The icons (ascending) and (descending) specifies the sort direction of a column.
By default, the multi-sorting feature is enabled in Gantt. To sort multiple columns, hold the CTRL key, and then click the column header. To clear sort for a column, hold the SHIFT key, and then click the column header.
In this demo, multiple sorting enabled on load time by assigning multiple columns into SortSettings property.