Gantt Angular API

Example

Set the columnGroups property.

 <smart-gantt [columnGroups]="[{ label: 'User Info', name: 'userInfo' }, { label: 'Product Info', name: 'productInfo' }]"></smart-gantt>

Set the columnGroups property by using the component's instance.

 this.gantt.columnGroups = [{ label: 'User Info', name: 'userInfo' }, { label: 'Product Info', name: 'productInfo', parentGroup: 'purchaseInfo' }, { label: 'Purchase Info', name: 'purchaseInfo' }];

Get the columnGroups property.

 let columnGroups = this.gantt.columnGroups;

Example

Set the columnMinWidth property.

 <smart-gantt [columnMinWidth]="100"></smart-gantt>

Set the columnMinWidth property by using the component's instance.

 this.gantt.columnMinWidth = 20px;

Get the columnMinWidth property.

 let columnMinWidth = this.gantt.columnMinWidth;

Example

Set the columnReorder property.

 <smart-gantt [columnReorder]="true"></smart-gantt>

Set the columnReorder property by using the component's instance.

 this.gantt.columnReorder = false;

Get the columnReorder property.

 let columnReorder = this.gantt.columnReorder;

Example

Set the columnResize property.

 <smart-gantt [columnResize]="true"></smart-gantt>

Set the columnResize property by using the component's instance.

 this.gantt.columnResize = false;

Get the columnResize property.

 let columnResize = this.gantt.columnResize;

Example

Set the columnResizeFeedback property.

 <smart-gantt [columnResizeFeedback]="true"></smart-gantt>

Set the columnResizeFeedback property by using the component's instance.

 this.gantt.columnResizeFeedback = false;

Get the columnResizeFeedback property.

 let columnResizeFeedback = this.gantt.columnResizeFeedback;

Example

Set the columns property.

 <smart-gantt [columns]="[{ label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing' }, { label: 'Done', dataField: 'done' }]"></smart-gantt>

Set the columns property by using the component's instance.

 this.gantt.columns = [{ label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing', orientation: 'horizontal', columns: [{ label: 'Manual testing', dataField: 'manualTesting', selected: true, columns: [{ label: 'Desktop devices', dataField: 'desktop' }, { label: 'Mobile devices', dataField: 'mobile', selected: true }] }, { label: 'Unit testing', dataField: 'unitTesting' }] }];

Get the columns property.

 let columns = this.gantt.columns;

Example

Set the columnSizeMode property.

 <smart-gantt [columnSizeMode]="'auto'"></smart-gantt>

Set the columnSizeMode property by using the component's instance.

 this.gantt.columnSizeMode = 'default';

Get the columnSizeMode property.

 let columnSizeMode = this.gantt.columnSizeMode;

Example

Set the dataRowId property.

 <smart-gantt [dataRowId]="'ID'"></smart-gantt>

Set the dataRowId property by using the component's instance.

 this.gantt.dataRowId = 'uid';

Get the dataRowId property.

 let dataRowId = this.gantt.dataRowId;

Example

Set the dataTransform property.

 <smart-gantt [dataTransform]="dataTransformCallback"></smart-gantt>

Set the dataTransform property by using the component's instance.

 this.gantt.dataTransform = dataTransform;

Get the dataTransform property.

 let dataTransform = this.gantt.dataTransform;

Example

Set the disabled property.

 <smart-gantt [disabled]="true"></smart-gantt>

Set the disabled property by using the component's instance.

 this.gantt.disabled = false;

Get the disabled property.

 let disabled = this.gantt.disabled;

Example

Set the filtering property.

 <smart-gantt [filtering]="true"></smart-gantt>

Set the filtering property by using the component's instance.

 this.gantt.filtering = false;

Get the filtering property.

 let filtering = this.gantt.filtering;

Example

Set the filterRow property.

 <smart-gantt [filterRow]="true"></smart-gantt>

Set the filterRow property by using the component's instance.

 this.gantt.filterRow = false;

Get the filterRow property.

 let filterRow = this.gantt.filterRow;

Example

Set the filterTemplate property.

 <smart-gantt [filterTemplate]="'customFilterTemplate'"></smart-gantt>

Set the filterTemplate property by using the component's instance.

 this.gantt.filterTemplate = 'myFilterTemplate';

Get the filterTemplate property.

 let filterTemplate = this.gantt.filterTemplate;

Example

Set the footerRow property.

 <smart-gantt [footerRow]="'customFooterRow'"></smart-gantt>

Set the footerRow property by using the component's instance.

 this.gantt.footerRow = 'myFooterRow';

Get the footerRow property.

 let footerRow = this.gantt.footerRow;

Example

Set the freezeFooter property.

 <smart-gantt [freezeFooter]="true"></smart-gantt>

Set the freezeFooter property by using the component's instance.

 this.gantt.freezeFooter = false;

Get the freezeFooter property.

 let freezeFooter = this.gantt.freezeFooter;

Example

Set the freezeHeader property.

 <smart-gantt [freezeHeader]="true"></smart-gantt>

Set the freezeHeader property by using the component's instance.

 this.gantt.freezeHeader = false;

Get the freezeHeader property.

 let freezeHeader = this.gantt.freezeHeader;

Example

Set the headerRow property.

 <smart-gantt [headerRow]="'customHeaderRowTemplate'"></smart-gantt>

Set the headerRow property by using the component's instance.

 this.gantt.headerRow = 'myHeaderRow';

Get the headerRow property.

 let headerRow = this.gantt.headerRow;

Example

Set the keyboardNavigation property.

 <smart-gantt [keyboardNavigation]="true"></smart-gantt>

Set the keyboardNavigation property by using the component's instance.

 this.gantt.keyboardNavigation = false;

Get the keyboardNavigation property.

 let keyboardNavigation = this.gantt.keyboardNavigation;

Example

Set the locale property.

 <smart-gantt [locale]="'de'"></smart-gantt>

Set the locale property by using the component's instance.

 this.gantt.locale = 'fr';

Get the locale property.

 let locale = this.gantt.locale;

Example

Set the messages property.

 <smart-gantt [messages]="{"he":{"add":"הוסף תנאי","all":"כל העמודות","apply":"להגיש מועמדות","between":"בֵּין","cancel":"לְבַטֵל","clearFilter":"נקה את המסנן","close":"סגור","column":"טור:","condition":"מַצָב:","conditionalFormatting":"עיצוב מותנה","CONTAINS":"מכיל","CONTAINS_CASE_SENSITIVE":"מכיל (רגיש רישיות)","DOES_NOT_CONTAIN":"לא מכיל","DOES_NOT_CONTAIN_CASE_SENSITIVE":"לא מכיל (רגיש רישיות)","EMPTY":"ריק","ENDS_WITH":"נגמר עם","ENDS_WITH_CASE_SENSITIVE":"מסתיים ב (רגיש רישיות)","EQUAL":"שווה","EQUAL_CASE_SENSITIVE":"שווה (רגיש לרישיות","filterCondition":"מצב סינון","filterPlaceholder":"לְסַנֵן","firstButton":"ראשון","fontFamily":"משפחת גופן:","fontSize":"גודל גופן:","format":"פוּרמָט:","formatColumn":"עמוד עמוד","GREATER_THAN":"גדול מ","GREATER_THAN_OR_EQUAL":"גדול או שווה","greaterThan":"גדול מ","highlight":"שִׂיא","invalidValue":"ערך לא תקין","itemsPerPage":"פריטים לעמוד:","lastButton":"אחרון","LESS_THAN":"פחות מ","LESS_THAN_OR_EQUAL":"פחות מ או שווה","lessThan":"פחות מ","nextButton":"הַבָּא","NOT_EMPTY":"לא ריק","NOT_EQUAL":"לא שווה","NOT_NULL":"לא ריק","notEqual":"לא שווה ל","NULL":"null","ok":"בסדר","previousButton":"קודם","remove":"הסר את המצב","secondValue":"ערך שני:","STARTS_WITH":"מתחיל עם","STARTS_WITH_CASE_SENSITIVE":"מתחיל עם (רגיש רישיות)","summaryPrefix":"שֶׁל","text":"טֶקסט","value":"ערך:","with":"עם"}}"></smart-gantt>

Set the messages property by using the component's instance.

 this.gantt.messages = {"en":{"add":"Add condition","all":"All columns","apply":"Apply","between":"Between","cancel":"Cancel","clearFilter":"Clear filter","close":"Close","column":"Column:","condition":"Condition:","conditionalFormatting":"Conditional Formatting","CONTAINS":"contains","CONTAINS_CASE_SENSITIVE":"contains (case sensitive)","DOES_NOT_CONTAIN":"does not contain","DOES_NOT_CONTAIN_CASE_SENSITIVE":"does not contain (case sensitive)","EMPTY":"empty","ENDS_WITH":"ends with","ENDS_WITH_CASE_SENSITIVE":"ends with (case sensitive)","EQUAL":"equal","EQUAL_CASE_SENSITIVE":"equal (case sensitive)","filterCondition":"Filter condition","filterPlaceholder":"Filter","firstButton":"First","fontFamily":"Font family:","fontSize":"Font size:","format":"Format:","formatColumn":"Format Column","GREATER_THAN":"greater than","GREATER_THAN_OR_EQUAL":"greater than or equal","greaterThan":"Greater Than","highlight":"Highlight","invalidValue":"Invalid value","itemsPerPage":"Items per page:","lastButton":"Last","LESS_THAN":"less than","LESS_THAN_OR_EQUAL":"less than or equal","lessThan":"Less Than","nextButton":"Next","NOT_EMPTY":"not empty","NOT_EQUAL":"not equal","NOT_NULL":"not null","notEqual":"Not Equal To","NULL":"null","ok":"OK","previousButton":"Previous","remove":"Remove condition","secondValue":"Second value:","STARTS_WITH":"starts with","STARTS_WITH_CASE_SENSITIVE":"starts with (case sensitive)","summaryPrefix":"of","text":"Text","value":"Value:","with":"with"}};

Get the messages property.

 let messages = this.gantt.messages;

Example

Set the onCellRender property.

 <smart-gantt [onCellRender]="onCellRender"></smart-gantt>

Set the onCellRender property by using the component's instance.

 this.gantt.onCellRender = onCellRenderCallback;

Get the onCellRender property.

 let onCellRender = this.gantt.onCellRender;

Example

Set the onColumnRender property.

 <smart-gantt [onColumnRender]="onColumnRender"></smart-gantt>

Set the onColumnRender property by using the component's instance.

 this.gantt.onColumnRender = onColumnRenderCallback;

Get the onColumnRender property.

 let onColumnRender = this.gantt.onColumnRender;

Example

Set the onInit property.

 <smart-gantt [onInit]="onInit"></smart-gantt>

Set the onInit property by using the component's instance.

 this.gantt.onInit = onInitCallback;

Get the onInit property.

 let onInit = this.gantt.onInit;

Example

Set the rightToLeft property.

 <smart-gantt [rightToLeft]="true"></smart-gantt>

Set the rightToLeft property by using the component's instance.

 this.gantt.rightToLeft = true;

Get the rightToLeft property.

 let rightToLeft = this.gantt.rightToLeft;

Example

Set the rowDetailTemplate property.

 <smart-gantt [rowDetailTemplate]="'
{{number}}
'"></smart-gantt>

Set the rowDetailTemplate property by using the component's instance.

 this.gantt.rowDetailTemplate = '
{{name}}
';

Get the rowDetailTemplate property.

 let rowDetailTemplate = this.gantt.rowDetailTemplate;

Example

Set the selected property.

 <smart-gantt [selected]="[5, 8, 9]"></smart-gantt>

Set the selected property by using the component's instance.

 this.gantt.selected = [0];

Get the selected property.

 let selected = this.gantt.selected;

Example

Set the selection property.

 <smart-gantt [selection]="true"></smart-gantt>

Set the selection property by using the component's instance.

 this.gantt.selection = false;

Get the selection property.

 let selection = this.gantt.selection;

Example

Set the selectionMode property.

 <smart-gantt [selectionMode]="'extended'"></smart-gantt>

Set the selectionMode property by using the component's instance.

 this.gantt.selectionMode = 'many';

Get the selectionMode property.

 let selectionMode = this.gantt.selectionMode;

Example

Set the sort property.

 <smart-gantt [sort]="sort"></smart-gantt>

Set the sort property by using the component's instance.

 this.gantt.sort = sortCallback;

Get the sort property.

 let sort = this.gantt.sort;

Example

Set the sortMode property.

 <smart-gantt [sortMode]="'one'"></smart-gantt>

Set the sortMode property by using the component's instance.

 this.gantt.sortMode = 'many';

Get the sortMode property.

 let sortMode = this.gantt.sortMode;

Example

Set the tooltip property.

 <smart-gantt [tooltip]="true"></smart-gantt>

Set the tooltip property by using the component's instance.

 this.gantt.tooltip = false;

Get the tooltip property.

 let tooltip = this.gantt.tooltip;

Example

Set up the event handler of cellBeginEdit event.

Html

 <smart-gantt (cellBeginEdit)="onCellBeginEdit($event)"></smart-gantt>

Typescript

onCellBeginEdit($event) {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        value = detail.value;


	// event handling code goes here.
}

this.gantt.addEventListener('cellBeginEdit', (event: CustomEvent) => {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        value = detail.value;

	// event handling code goes here.
})

Example

Set up the event handler of cellClick event.

Html

 <smart-gantt (cellClick)="onCellClick($event)"></smart-gantt>

Typescript

onCellClick($event) {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        value = detail.value,
        originalEvent = detail.originalEvent;


	// event handling code goes here.
}

this.gantt.addEventListener('cellClick', (event: CustomEvent) => {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        value = detail.value,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

Example

Set up the event handler of cellEndEdit event.

Html

 <smart-gantt (cellEndEdit)="onCellEndEdit($event)"></smart-gantt>

Typescript

onCellEndEdit($event) {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        value = detail.value;


	// event handling code goes here.
}

this.gantt.addEventListener('cellEndEdit', (event: CustomEvent) => {
    const detail = event.detail,
        id = detail.id,
        dataField = detail.dataField,
        row = detail.row,
        value = detail.value;

	// event handling code goes here.
})

Example

Set up the event handler of change event.

Html

 <smart-gantt (change)="onChange($event)"></smart-gantt>

Typescript

onChange($event) {
    const detail = event.detail,
        type = detail.type;


	// event handling code goes here.
}

this.gantt.addEventListener('change', (event: CustomEvent) => {
    const detail = event.detail,
        type = detail.type;

	// event handling code goes here.
})

Example

Set up the event handler of collapse event.

Html

 <smart-gantt (collapse)="onCollapse($event)"></smart-gantt>

Typescript

onCollapse($event) {
    const detail = event.detail,
        id = detail.id,
        record = detail.record;


	// event handling code goes here.
}

this.gantt.addEventListener('collapse', (event: CustomEvent) => {
    const detail = event.detail,
        id = detail.id,
        record = detail.record;

	// event handling code goes here.
})

Example

Set up the event handler of expand event.

Html

 <smart-gantt (expand)="onExpand($event)"></smart-gantt>

Typescript

onExpand($event) {
    const detail = event.detail,
        id = detail.id,
        record = detail.record;


	// event handling code goes here.
}

this.gantt.addEventListener('expand', (event: CustomEvent) => {
    const detail = event.detail,
        id = detail.id,
        record = detail.record;

	// event handling code goes here.
})

Example

Set up the event handler of columnClick event.

Html

 <smart-gantt (columnClick)="onColumnClick($event)"></smart-gantt>

Typescript

onColumnClick($event) {
    const detail = event.detail,
        dataField = detail.dataField;


	// event handling code goes here.
}

this.gantt.addEventListener('columnClick', (event: CustomEvent) => {
    const detail = event.detail,
        dataField = detail.dataField;

	// event handling code goes here.
})

Example

Set up the event handler of columnResize event.

Html

 <smart-gantt (columnResize)="onColumnResize($event)"></smart-gantt>

Typescript

onColumnResize($event) {
    const detail = event.detail,
        dataField = detail.dataField,
        headerCellElement = detail.headerCellElement,
        width = detail.width;


	// event handling code goes here.
}

this.gantt.addEventListener('columnResize', (event: CustomEvent) => {
    const detail = event.detail,
        dataField = detail.dataField,
        headerCellElement = detail.headerCellElement,
        width = detail.width;

	// event handling code goes here.
})

Example

Set up the event handler of filter event.

Html

 <smart-gantt (filter)="onFilter($event)"></smart-gantt>

Typescript

onFilter($event) {
    const detail = event.detail,
        action = detail.action,
        filters = detail.filters;


	// event handling code goes here.
}

this.gantt.addEventListener('filter', (event: CustomEvent) => {
    const detail = event.detail,
        action = detail.action,
        filters = detail.filters;

	// event handling code goes here.
})

Example

Set up the event handler of group event.

Html

 <smart-gantt (group)="onGroup($event)"></smart-gantt>

Typescript

onGroup($event) {
    const detail = event.detail,
        action = detail.action,
        dataField = detail.dataField,
        label = detail.label,
        path = detail.path;


	// event handling code goes here.
}

this.gantt.addEventListener('group', (event: CustomEvent) => {
    const detail = event.detail,
        action = detail.action,
        dataField = detail.dataField,
        label = detail.label,
        path = detail.path;

	// event handling code goes here.
})

Example

Set up the event handler of rowBeginEdit event.

Html

 <smart-gantt (rowBeginEdit)="onRowBeginEdit($event)"></smart-gantt>

Typescript

onRowBeginEdit($event) {
    const detail = event.detail,
        id = detail.id,
        row = detail.row;


	// event handling code goes here.
}

this.gantt.addEventListener('rowBeginEdit', (event: CustomEvent) => {
    const detail = event.detail,
        id = detail.id,
        row = detail.row;

	// event handling code goes here.
})

Example

Set up the event handler of rowEndEdit event.

Html

 <smart-gantt (rowEndEdit)="onRowEndEdit($event)"></smart-gantt>

Typescript

onRowEndEdit($event) {
    const detail = event.detail,
        id = detail.id,
        row = detail.row;


	// event handling code goes here.
}

this.gantt.addEventListener('rowEndEdit', (event: CustomEvent) => {
    const detail = event.detail,
        id = detail.id,
        row = detail.row;

	// event handling code goes here.
})

Example

Set up the event handler of sort event.

Html

 <smart-gantt (sort)="onSort($event)"></smart-gantt>

Typescript

onSort($event) {
    const detail = event.detail,
        columns = detail.columns,
        sortDataFields = detail.sortDataFields,
        sortOrders = detail.sortOrders,
        sortDataTypes = detail.sortDataTypes,
        type = detail.type;


	// event handling code goes here.
}

this.gantt.addEventListener('sort', (event: CustomEvent) => {
    const detail = event.detail,
        columns = detail.columns,
        sortDataFields = detail.sortDataFields,
        sortOrders = detail.sortOrders,
        sortDataTypes = detail.sortDataTypes,
        type = detail.type;

	// event handling code goes here.
})

Example

Set up the event handler of ticketDragStart event.

Html

 <smart-gantt (ticketDragStart)="onTicketDragStart($event)"></smart-gantt>

Typescript

onTicketDragStart($event) {
    const detail = event.detail,
        data = detail.data,
        id = detail.id;


	// event handling code goes here.
}

this.gantt.addEventListener('ticketDragStart', (event: CustomEvent) => {
    const detail = event.detail,
        data = detail.data,
        id = detail.id;

	// event handling code goes here.
})

Example

Set up the event handler of ticketDragCancel event.

Html

 <smart-gantt (ticketDragCancel)="onTicketDragCancel($event)"></smart-gantt>

Typescript

onTicketDragCancel($event) {
    const detail = event.detail,
        data = detail.data;


	// event handling code goes here.
}

this.gantt.addEventListener('ticketDragCancel', (event: CustomEvent) => {
    const detail = event.detail,
        data = detail.data;

	// event handling code goes here.
})

Example

Set up the event handler of ticketDragEnd event.

Html

 <smart-gantt (ticketDragEnd)="onTicketDragEnd($event)"></smart-gantt>

Typescript

onTicketDragEnd($event) {
    const detail = event.detail,
        data = detail.data;


	// event handling code goes here.
}

this.gantt.addEventListener('ticketDragEnd', (event: CustomEvent) => {
    const detail = event.detail,
        data = detail.data;

	// event handling code goes here.
})

Example

Set up the event handler of ticketReorder event.

Html

 <smart-gantt (ticketReorder)="onTicketReorder($event)"></smart-gantt>

Typescript

onTicketReorder($event) {
    const detail = event.detail,
        data = detail.data,
        endData = detail.endData,
        id = detail.id;


	// event handling code goes here.
}

this.gantt.addEventListener('ticketReorder', (event: CustomEvent) => {
    const detail = event.detail,
        data = detail.data,
        endData = detail.endData,
        id = detail.id;

	// event handling code goes here.
})

Invoke the addRow method.

this.gantt.addRow({"firstName":"Peter","lastName":"Fuller"});

Invoke the addFilter method.

this.gantt.addFilter("'firstName', filterGroup");

Invoke the beginEdit method.

this.gantt.beginEdit("3, 'lastName'");

Invoke the beginUpdate method.

this.gantt.beginUpdate();

Invoke the cancelEdit method.

this.gantt.cancelEdit();

Invoke the clearFilters method.

this.gantt.clearFilters();

Invoke the clearSelection method.

this.gantt.clearSelection();

Invoke the clearSort method.

this.gantt.clearSort();

Invoke the collapseAllRowDetails method.

this.gantt.collapseAllRowDetails();

Invoke the disableSelect method.

this.gantt.disableSelect(2);

Invoke the enableSelect method.

this.gantt.enableSelect(2);

Invoke the endEdit method.

this.gantt.endEdit();

Invoke the endUpdate method.

this.gantt.endUpdate();

Invoke the expandAllRowDetails method.

this.gantt.expandAllRowDetails();

Invoke the getSelection method.

const result = this.gantt.getSelection();

Invoke the getValue method.

const result = this.gantt.getValue("3, 'lastName'");

Invoke the getColumnProperty method.

const result = this.gantt.getColumnProperty("firstName","width");

Invoke the refresh method.

this.gantt.refresh();

Invoke the removeFilter method.

this.gantt.removeFilter();

Invoke the removeRow method.

this.gantt.removeRow(1);

Invoke the select method.

this.gantt.select(2);

Invoke the setValue method.

this.gantt.setValue("3, 'lastName', 'Green'");

Invoke the sortBy method.

this.gantt.sortBy("firstName");

Invoke the setColumnProperty method.

this.gantt.setColumnProperty("firstName","width","300");

Invoke the updateRow method.

this.gantt.updateRow(3,{"firstName":"Peter","lastName":"Fuller"});

Invoke the unselect method.

this.gantt.unselect(5);

Get the label property.

 let label = this.gantt.columnGroups[0].label;

Get the name property.

 let name = this.gantt.columnGroups[0].name;

Get the parentGroup property.

 let parentGroup = this.gantt.columnGroups[0].parentGroup;

Get the allowEdit property.

 let allowEdit = this.gantt.columns[0].allowEdit;

Get the allowFilter property.

 let allowFilter = this.gantt.columns[0].allowFilter;

Get the allowResize property.

 let allowResize = this.gantt.columns[0].allowResize;

Get the allowSort property.

 let allowSort = this.gantt.columns[0].allowSort;

Get the columnGroup property.

 let columnGroup = this.gantt.columns[0].columnGroup;

Get the dataField property.

 let dataField = this.gantt.columns[0].dataField;

Get the dataType property.

 let dataType = this.gantt.columns[0].dataType;

Get the freeze property.

 let freeze = this.gantt.columns[0].freeze;

Get the formatFunction property.

 let formatFunction = this.gantt.columns[0].formatFunction;

Get the label property.

 let label = this.gantt.columns[0].label;

Get the map property.

 let map = this.gantt.columns[0].map;

Get the responsivePriority property.

 let responsivePriority = this.gantt.columns[0].responsivePriority;

Get the sort property.

 let sort = this.gantt.columns[0].sort;

Get the templateElement property.

 let templateElement = this.gantt.columns[0].templateElement;

Get the templateElementSettings property.

 let templateElementSettings = this.gantt.columns[0].templateElementSettings;

Get the transform property.

 let transform = this.gantt.columns[0].transform;

Get the validation property.

 let validation = this.gantt.columns[0].validation;

Get the visible property.

 let visible = this.gantt.columns[0].visible;

Get the width property.

 let width = this.gantt.columns[0].width;

Example

Set the autoGenerateColumns property by using the component's instance.

 this.gantt.dataSourceSettings[0].autoGenerateColumns = false;

Get the autoGenerateColumns property.

 let autoGenerateColumns = this.gantt.dataSourceSettings[0].autoGenerateColumns;

Example

Set the childrenDataField property by using the component's instance.

 this.gantt.dataSourceSettings[0].childrenDataField = 'children';

Get the childrenDataField property.

 let childrenDataField = this.gantt.dataSourceSettings[0].childrenDataField;

Example

Set the root property by using the component's instance.

 this.gantt.dataSourceSettings[0].root = 'children';

Get the root property.

 let root = this.gantt.dataSourceSettings[0].root;

Example

Set the sanitizeHTML property by using the component's instance.

 this.gantt.dataSourceSettings[0].sanitizeHTML = 'blackList';

Get the sanitizeHTML property.

 let sanitizeHTML = this.gantt.dataSourceSettings[0].sanitizeHTML;

Example

Set the record property by using the component's instance.

 this.gantt.dataSourceSettings[0].record = 'children';

Get the record property.

 let record = this.gantt.dataSourceSettings[0].record;

Example

Set the groupBy property by using the component's instance.

 this.gantt.dataSourceSettings[0].groupBy = true;

Get the groupBy property.

 let groupBy = this.gantt.dataSourceSettings[0].groupBy;

Example

Set the dataFields property by using the component's instance.

 this.gantt.dataSourceSettings[0].dataFields = [id: number];

Get the dataFields property.

 let dataFields = this.gantt.dataSourceSettings[0].dataFields;

Example

Set the dataSourceType property by using the component's instance.

 this.gantt.dataSourceSettings[0].dataSourceType = 'json';

Get the dataSourceType property.

 let dataSourceType = this.gantt.dataSourceSettings[0].dataSourceType;

Get the id property.

 let id = this.gantt.dataSourceSettings[0].id;

Example

Set the keyDataField property by using the component's instance.

 this.gantt.dataSourceSettings[0].keyDataField = 'uid';

Get the keyDataField property.

 let keyDataField = this.gantt.dataSourceSettings[0].keyDataField;

Example

Set the parentDataField property by using the component's instance.

 this.gantt.dataSourceSettings[0].parentDataField = 'uid';

Get the parentDataField property.

 let parentDataField = this.gantt.dataSourceSettings[0].parentDataField;

Example

Set the mapChar property by using the component's instance.

 this.gantt.dataSourceSettings[0].mapChar = 'uid';

Get the mapChar property.

 let mapChar = this.gantt.dataSourceSettings[0].mapChar;

Get the virtualDataSource property.

 let virtualDataSource = this.gantt.dataSourceSettings[0].virtualDataSource;

Get the virtualDataSourceOnExpand property.

 let virtualDataSourceOnExpand = this.gantt.dataSourceSettings[0].virtualDataSourceOnExpand;

Get the name property.

 let name = this.gantt.dataSourceSettings[0].dataFields[0].name;

Get the map property.

 let map = this.gantt.dataSourceSettings[0].dataFields[0].map;

Get the dataType property.

 let dataType = this.gantt.dataSourceSettings[0].dataFields[0].dataType;