This samples demonstrates the way of customizing the cells by adding icons for Priority column and highlight the cells of Progress column based on certain condition using queryCellInfo event.
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority |
---|---|---|---|---|---|---|
1 | Planning | 2/3/2017 | 2/7/2017 | 5 | 100 | ![]() |
2 | Plan timeline | 2/3/2017 | 2/7/2017 | 5 | 100 | ![]() |
3 | Plan budget | 2/3/2017 | 2/7/2017 | 5 | 100 | ![]() |
4 | Allocate resources | 2/3/2017 | 2/7/2017 | 5 | 100 | ![]() |
5 | Planning complete | 2/7/2017 | 2/7/2017 | 0 | 0 | ![]() |
6 | Design | 2/10/2017 | 2/14/2017 | 3 | 86 | ![]() |
7 | Software Specification | 2/10/2017 | 2/12/2017 | 3 | 60 | ![]() |
8 | Develop prototype | 2/10/2017 | 2/12/2017 | 3 | 100 | ![]() |
9 | Get approval from customer | 2/13/2017 | 2/14/2017 | 2 | 100 | ![]() |
10 | Design Documentation | 2/13/2017 | 2/14/2017 | 2 | 100 | ![]() |
11 | Design complete | 2/14/2017 | 2/14/2017 | 0 | 0 | ![]() |
The appearance of cells can be customized by using the queryCellInfo event. The queryCellInfo event triggers for every cell. In that event handler, you can get QueryCellInfoEventArgs that contains the details of the cell.
In this demo, we have customized the column values by adding icons for Priority column and highlighted the Progress column based on certain condition using queryCellInfo event.