GanttTable Custom Column

VWGrid is highly customizable, you can create your own cell template, cell editing template and binders. This topic will show how to add a custom Column to GanttTable(derived form VWGrid).

Here is the example, which shows how to add a Priority column, the Priority value in data source is an integer but GanttTable will show the corresponding status as a string.

//priority to status converter.

function priorityTextConverter(data, value) {

var priority = data.Activity.DataSource.Status.Priority;

if (priority != undefined) {

switch (priority.toString()) {

case "1":

return "Low";

break;

case "2":

return "Medium";

break;

case "3":

return "High";

break;

}

//Column definition.

{

field: "Activity.DataSource.Status.Priority",

title: "Priority",

width: 100,

editor: "<select data-bind='priorityEditor:Activity.DataSource.Status.Priority' ></select>",

//customized cell template, priorityTextConverter is called for each and every priority cell.

template: "<div>${priorityTextConverter(data)}</div>"

Similarly, you can display the status image in a Priority Cue Column.

//priority to status image converter

function priorityImageConverter(data, value) {

var priority = data.Activity.DataSource.Status.Priority;

if (priority != undefined) {

switch (priority.toString()) {

case "1":

return '<img src="Images/low.png" alt="Low Priority" height="15" width="20" />';

break;

case "2":

return '<img src="Images/medium.png" alt="medium Priority" height="15" width="20" />';

break;

case "3":

return '<img src="Images/high.png" alt="high Priority" height="15" width="20" />';

break;

}

//Column definition.

{

field: "Activity.DataSource.Status.Priority",

title: "Priority Cue",

width: 100,

template: "<div>${priorityImageConverter(data)}</div>"

By default GanttTable Listens the property changes and updates the corresponding cell in table. Here, the Priority value changes will reflect in both Priority and Priority Cue column, GanttTable identifies these column by its field value ("Activity.DataSource.Status.Priority" in this case).

Note: Please take a look at the "Samples\GanttControlTableCustomization" sample where these features are illustrated.