Vue Gantt Props

$(function() {
    $("#gantt").dxGantt({
        allowSelection: false,
        // ...
    });
});

<template>
    <DxGantt
        :allow-selection="false" >
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            allowSelection={false} >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .AllowSelection(false)
    // ...
)

<!-- Razor C# -->
@(Html.DevExtreme().Gantt()
    .AllowSelection(false)
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        columns: [{
            dataField: "title",
            caption: "Subject",
            width: 300
        }, {
            dataField: "start",
            caption: "Start Date"
        }, {
            dataField: "end",
            caption: "End Date"
        }],
        // ...
    });
});

<template>
    <DxGantt
        :allow-selection="false" >
        <DxColumn
            :width="300"
            data-field="title"
            caption="Subject"
        />
        <DxColumn
            data-field="start"
            caption="Start Date"
        />
        <DxColumn
            data-field="end"
            caption="End Date"
        />            
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, DxColumn
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, DxColumn
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            <Column dataField="title" caption="Subject" width={300} />
            <Column dataField="start" caption="Start Date" />
            <Column dataField="end" caption="End Date" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .Columns(columns => {
        columns.AddFor(m => m.Title)
            .Caption("Subject")
            .Width(300);
        columns.AddFor(m => m.Start)
            .Caption("Start Date");
        columns.AddFor(m => m.End)
            .Caption("End Date");
    })
    // ...
)

@(Html.DevExtreme().Gantt()
    .Columns(columns => {
        columns.AddFor(m => m.Title)
            .Caption("Subject")
            .Width(300);
        columns.AddFor(m => m.Start)
            .Caption("Start Date");
        columns.AddFor(m => m.End)
            .Caption("End Date");
    })
    // ...
)

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Dependencies(d => d
        .DataSource(ds => ds.Array().Data(SampleData.GanttDependencies).Key("ID"))
        .KeyExpr("ID")
        .PredecessorIdExpr("PredecessorId")
        .SuccessorIdExpr("SuccessorId")
        .TypeExpr("Type")
    )        
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Dependency> GanttDependencies = new[] {
        new Dependency { ID = 1, PredecessorId = 3, SuccessorId = 4, Type = 0 },
        new Dependency { ID = 2, PredecessorId = 4, SuccessorId = 5, Type = 0 },
        // ...
    }
    // ...
}

@(Html.DevExtreme().Gantt<Task>()
    .Dependencies(d => d
        .DataSource(ds => ds.Array().Data(SampleData.GanttDependencies).Key("ID"))
        .KeyExpr("ID")
        .PredecessorIdExpr("PredecessorId")
        .SuccessorIdExpr("SuccessorId")
        .TypeExpr("Type")
    )        
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Dependency> GanttDependencies = new[] {
        new Dependency { ID = 1, PredecessorId = 3, SuccessorId = 4, Type = 0 },
        new Dependency { ID = 2, PredecessorId = 4, SuccessorId = 5, Type = 0 },
        // ...
    }
    // ...
}

$(function() {
    $("#gantt").dxGantt({
        editing: {
            enabled: true,
            allowDependencyAdding: false, 
            allowDependencyDeleting: false, 
            allowResourceAdding: false, 
            allowResourceDeleting: false, 
            allowTaskAdding: false, 
            allowTaskDeleting: false, 
            allowTaskResourceUpdating: false, 
            allowTaskUpdating: false
        }
    });
}); 

<template>
    <DxGantt ... >
        <DxEditing
            :enabled="true"
            :allow-dependency-adding="false" 
            :allow-dependency-deleting="false" 
            :allow-resource-adding="false"
            :allow-resource-deleting="false"
            :allow-task-adding="false"
            :allow-task-deleting="false"
            :allow-task-resource-updating="false"
            :allow-task-updating="false"
         />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxEditing, 
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, 
            DxEditing, 
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Editing, 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <Editing 
                enabled={true}
                allowDependencyAdding={false}
                allowDependencyDeleting={false}
                allowResourceAdding={false}
                allowResourceDeleting={false}
                allowTaskAdding={false}
                allowTaskDeleting={false}
                allowTaskResourceUpdating={false}
                allowTaskUpdating={false} />
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .Editing(e => {
        e.Enabled(true)
        e.AllowDependencyAdding(false)
        e.AllowDependencyDeleting(false)
        e.AllowResourceAdding(false)
        e.AllowResourceDeleting(false)
        e.AllowTaskAdding(false)
        e.AllowTaskDeleting(false)
        e.AllowTaskResourceUpdating(false)
        e.AllowTaskUpdating(false)
    })
    // ...
)

$(function(){
    $("#ganttContainer").dxGantt({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<template>
    <DxGantt ...
        :element-attr="ganttAttributes">
    </DxGantt>
</template>

<script>
import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    data() {
        return {
            ganttAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    ganttAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Gantt ...
                elementAttr={this.ganttAttributes}>
            </Gantt>
        );
    }
}
export default App;

$(function() {
    $("#gantt").dxGantt({
        startDateRange: new Date(2018, 01, 1),
        endDateRange: new Date(2020, 01, 1)
        // ...
    });
});

<template>
    <DxGantt
        :start-date-range="startDateRange"
        :end-date-range="endDateRange">
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        },
        data() {
            return {
                startDateRange: new Date(2018, 12, 1),
                endDateRange: new Date(2020, 12, 1),
            }
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    const startDateRange = new Date(2018, 1, 1);
    const endDateRange = new Date(2020, 1, 1);

    return (
        <Gantt
            startDateRange = {startDateRange}
            endDateRange = {endDateRange} >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .StartDateRange(new Date("January 1, 2018"))
    .EndDateRange(new Date("January 1, 2020"))
    // ...
)

@(Html.DevExtreme().Gantt()
    .StartDateRange(new Date("January 1, 2018"))
    .EndDateRange(new Date("January 1, 2020"))
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        firstDayOfWeek: 1,
        // ...
    });
});

<template>
    <DxGantt
        :first-day-of-week="1" >
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            firstDayOfWeek={1} >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .FirstDayOfWeek(FirstDayOfWeek.Monday)
    // ...
)

@(Html.DevExtreme().Gantt()
    .FirstDayOfWeek(FirstDayOfWeek.Monday)
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        headerFilter: {
            visible: true,
            width: 280,
            height: 350,
            searchTimeout: 800
        },
        // ...
    });
});

<template>
    <DxGantt ... >
        <DxHeaderFilter
            :visible="true"
            :width="280"
            :height="350" 
            :search-timeout="800"
        />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxHeaderFilter, 
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, 
            DxHeaderFilter, 
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    HeaderFilter, 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <HeaderFilter
                visible={true}
                width={280} 
                height={350}
                searchTimeout={800} />
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .HeaderFilter(e => {
        e.Visible(true)
        e.Width(280)
        e.Height(350)
        e.SearchTimeout(800)
    })
    // ...
)

@(Html.DevExtreme().Gantt()
    .HeaderFilter(e => {
        e.Visible(true)
        e.Width(280)
        e.Height(350)
        e.SearchTimeout(800)
    })
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        // ...
        onContextMenuPreparing: function (e) {
            // your code
            e.cancel = true;
        }
    });
}); 

<template>
    <DxGantt
        ...
        @context-menu-preparing="onContextMenuPreparing"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onContextMenuPreparing(e) {
            // your code
            e.cancel = true;
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onContextMenuPreparing={this.onContextMenuPreparing}
            />
        );
    }
    onContextMenuPreparing = (e) => {
        // your code
        e.cancel = true;
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onContextMenuPreparing("gantt_contextMenuPreparing_handler")
    // ...
)
<script>
    function gantt_contextMenuPreparing_handler(e) {
        // your code
        e.cancel = true;
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onCustomCommand: function (e) {
            // your code
        }
    });
}); 

<template>
    <DxGantt
        ...
        @custom-command="onCustomCommand"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onCustomCommand(e) {
            // your code
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onCustomCommand={this.onCustomCommand}
            />
        );
    }
    onCustomCommand = (e) => {
        // your code
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onCustomCommand("gantt_customCommand_handler")
    // ...
)
<script>
    function gantt_customCommand_handler(e) {
        // your code
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onDependencyDeleted: function (e) {
            if (e.key != 1) 
                // your code
        }            
    })
})

<template>
    <DxGantt
        ...
        @dependency-deleted="onDependencyDeleted"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onDependencyDeleted(e) {
            if (e.key != 1) 
                // your code  
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onDependencyDeleted={this.onDependencyDeleted}
            />
        );
    }
    onDependencyDeleted = (e) => {
        if (e.key != 1) 
            // your code
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onDependencyDeleted("gantt_dependencyDeleted_handler")
    // ...
)
<script>
    function gantt_dependencyDeleted_handler(e) {
        if (e.key != 1) 
            // your code
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onDependencyDeleting: function (e) {
            if (e.key != 1) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @dependency-deleting="onDependencyDeleting"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onDependencyDeleting(e) {
            if (e.key != 1) {
                // your code 
                e.cancel = true;
            } 
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onDependencyDeleting={this.onDependencyDeleting}
            />
        );
    }
    onDependencyDeleting = (e) => {
        if (e.key != 1) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onDependencyDeleting("gantt_dependencyDeleting_handler")
    // ...
)
<script>
    function gantt_dependencyDeleting_handler(e) {
        if (e.key != 1) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onDependencyInserted: function (e) {
            if (e.values.type == 3) {
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @dependency-inserted="onDependencyInserted"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onDependencyInserted(e) {
            if (e.values.type == 3) {
                // your code
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onDependencyInserted={this.onDependencyInserted}
            />
        );
    }
    onDependencyInserted = (e) => {
        if (e.values.type == 3) {
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onDependencyInserted("gantt_dependencyInserted_handler")
    // ...
)
<script>
    function gantt_dependencyInserted_handler(e) {
        if (e.key != 1) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onDependencyInserting: function (e) {
            if (e.values.type == 3) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @dependency-inserting="onDependencyInserting"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onDependencyInserting(e) {
            if (e.values.type == 3) {
                // your code
                e.cancel = true;
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onDependencyInserting={this.onDependencyInserting}
            />
        );
    }
    onDependencyInserting = (e) => {
        if (e.values.type == 3) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onDependencyInserting("gantt_dependencyInserting_handler")
    // ...
)
<script>
    function gantt_dependencyInserting_handler(e) {
        if (e.key != 1) {
            // your code
            e.cancel = true;
        }
    }
</script>

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.ganttInstance = e.component;
    }

    render() {
        return (
            <div>
                <Gantt onInitialized={this.saveInstance} />
            </div>
        );
    }
}

$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<template> 
    <DxGantt ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxGantt from 'devextreme-vue/gantt'; 

export default { 
    components: { 
        DxGantt
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Gantt from 'devextreme-react/gantt'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Gantt ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceAssigned: function (e) {
            if (e.values.taskID != 0) {
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @resource-assigned="onResourceAssigned"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onResourceAssigned(e) {
            if (e.values.taskID != 0) {
                // your code
            }                                                                                  
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onResourceAssigned={this.onResourceAssigned}
            />
        );
    }
    onResourceAssigned = (e) => {
        if (e.values.taskID != 0) {
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceAssigned("gantt_resourceAssigned_handler")
    // ...
)
<script>
    function gantt_resourceAssigned_handler(e) {
        if (e.values.taskID != 0) {
            // your code
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceAssigning: function (e) {
            if (e.values.taskID != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @resource-assigning="onResourceAssigning"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onResourceAssigning(e) {
            if (e.values.taskID != 0) {
                // your code
                e.cancel = true;
            }                                                                                  
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onResourceAssigning={this.onResourceAssigning}
            />
        );
    }
    onResourceAssigning = (e) => {
        if (e.values.taskID != 0) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceAssigning("gantt_resourceAssigning_handler")
    // ...
)
<script>
    function gantt_resourceAssigning_handler(e) {
        if (e.values.taskID != 0) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceDeleted: function (e) {
            if (e.key == 0) {
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @resource-deleted="onResourceDeleted"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onResourceDeleted(e) {
            if (e.key == 0) {
                // your code 
            } 
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onResourceDeleted={this.onResourceDeleted}
            />
        );
    }
    onResourceDeleted = (e) => {
        if (e.key == 0) {
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceDeleted("gantt_resourceDeleted_handler")
    // ...
)
<script>
    function gantt_resourceDeleted_handler(e) {
        if (e.key == 0) {
            // your code
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceDeleting: function (e) {
            if (e.key == 0) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @resource-deleting="onResourceDeleting"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onResourceDeleting(e) {
            if (e.key == 0) {
                // your code 
                e.cancel = true;
            } 
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onResourceDeleting={this.onResourceDeleting}
            />
        );
    }
    onResourceDeleting = (e) => {
        if (e.key == 0) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceDeleting("gantt_resourceDeleting_handler")
    // ...
)
<script>
    function gantt_resourceDeleting_handler(e) {
        if (e.key == 0) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceInserted: function (e) {
            if (e.values.text == " "){
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @resource-inserted="onResourceInserted"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onResourceInserted(e) {
            if (e.values.text == " "){
                // your code 
            } 
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onResourceInserted={this.onResourceInserted}
            />
        );
    }
    onResourceInserted = (e) => {
        if (e.values.text == " "){
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceInserted("gantt_resourceInserted_handler")
    // ...
)
<script>
    function gantt_resourceInserted_handler(e) {
        if (e.values.text == " "){
            // your code
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceInserting: function (e) {
            if (e.values.text == " "){
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @resource-inserting="onResourceInserting"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onResourceInserting(e) {
            if (e.values.text == " "){
                // your code 
                e.cancel = true;
            } 
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onResourceInserting={this.onResourceInserting}
            />
        );
    }
    onResourceInserting = (e) => {
        if (e.values.text == " "){
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceInserting("gantt_resourceInserting_handler")
    // ...
)
<script>
    function gantt_resourceInserting_handler(e) {
        if (e.values.text == " "){
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceManagerDialogShowing: function (e) {
            if (e.values[0].key != 1) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @resource-manager-dialog-showing="onResourceManagerDialogShowing"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onResourceManagerDialogShowing: function (e) {
            if (e.values[0].key != 1) {
                // your code
                e.cancel = true;
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onResourceManagerDialogShowing={this.onResourceManagerDialogShowing}
            />
        );
    }
    onResourceManagerDialogShowing: function (e) {
        if (e.values[0].key != 1) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceManagerDialogShowing("gantt_resourceManagerDialogShowing_handler")
    // ...
)
<script>
    function gantt_resourceManagerDialogShowing_handler(e) {
        if (e.values[0].key != 1) {
            // your code
            e.cancel = true;
        }
    }
</script>

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceManagerDialogShowing("gantt_resourceManagerDialogShowing_handler")
    // ...
)
<script>
    function gantt_resourceManagerDialogShowing_handler(e) {
        if (e.values[0].key != 1) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceUnassigned: function (e) {
            if (e.key != 0) {
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @resource-unassigned="onResourceUnassigned"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onResourceUnassigned(e) {
            if (e.key != 0) {
                // your code
            }                                                                                  
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onResourceUnassigned={this.onResourceUnassigned}
            />
        );
    }
    onResourceUnassigned = (e) => {
        if (e.key != 0) {
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceUnassigned("gantt_resourceUnassigned_handler")
    // ...
)
<script>
    function gantt_resourceUnassigned_handler(e) {
        if (e.key != 0) {
            // your code
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onResourceUnassigning: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @resource-unassigning="onResourceUnassigning"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onResourceUnassigning(e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }                                                                                  
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onResourceUnassigning={this.onResourceUnassigning}
            />
        );
    }
    onResourceUnassigning = (e) => {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onResourceUnassigning("gantt_resourceUnassigning_handler")
    // ...
)
<script>
    function gantt_resourceUnassigning_handler(e) {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onScaleCellPrepared: function(e) {
            var scaleElement = e.scaleElement[0];
            if(e.scaleIndex === 0) {
                scaleElement.style.backgroundColor = "silver";
                scaleElement.innerText = "bottom";
            } else {
                scaleElement.style.backgroundColor = "LightSteelBlue";
                scaleElement.innerText = "top";
            }
            var border = e.separatorElement[0];
            border.style.borderColor = "steelBlue";
        }
    });
}); 

<template>
    <DxGantt
        ...
        @scale-cell-prepared="onScaleCellPrepared"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onScaleCellPrepared: function(e) {
            var scaleElement = e.scaleElement[0];
            if(e.scaleIndex === 0) {
                scaleElement.style.backgroundColor = "silver";
                scaleElement.innerText = "bottom";
            } else {
                scaleElement.style.backgroundColor = "LightSteelBlue";
                scaleElement.innerText = "top";
            }
            var border = e.separatorElement[0];
            border.style.borderColor = "steelBlue";
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onScaleCellPrepared={this.onScaleCellPrepared}
            />
        );
    }
    onScaleCellPrepared: function(e) {
        var scaleElement = e.scaleElement[0];
        if(e.scaleIndex === 0) {
            scaleElement.style.backgroundColor = "silver";
            scaleElement.innerText = "bottom";
        } else {
            scaleElement.style.backgroundColor = "LightSteelBlue";
            scaleElement.innerText = "top";
        }
        var border = e.separatorElement[0];
        border.style.borderColor = "steelBlue";
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onScaleCellPrepared("gantt_scaleCellPrepared_handler")
    // ...
)
<script>
    function gantt_scaleCellPrepared_handler(e) {
        var scaleElement = e.scaleElement[0];
        if(e.scaleIndex === 0) {
            scaleElement.style.backgroundColor = "silver";
            scaleElement.innerText = "bottom";
        } else {
            scaleElement.style.backgroundColor = "LightSteelBlue";
            scaleElement.innerText = "top";
        }
        var border = e.separatorElement[0];
        border.style.borderColor = "steelBlue";
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onScaleCellPrepared: function(e) {
            var scaleElement = e.scaleElement;
            var color = "";
            var month = e.end.getMonth();
            if (month > 1 && month < 5) {
                color = "lightGreen";
            } else if (month > 4 && month < 8) {
                color = "green";
            } else if (month > 7 && month < 11) {
                color = "yellow";
            } else
                color = "white";
            scaleElement.style.backgroundColor = color;
        }
    });
}); 

<template>
    <DxGantt
        ...
        @scale-cell-prepared="onScaleCellPrepared"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onScaleCellPrepared: function(e) {
            var scaleElement = e.scaleElement;
            var color = "";
            var month = e.end.getMonth();
            if (month > 1 && month < 5) {
                color = "lightGreen";
            } else if (month > 4 && month < 8) {
                color = "green";
            } else if (month > 7 && month < 11) {
                color = "yellow";
            } else
                color = "white";
            scaleElement.style.backgroundColor = color;
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onScaleCellPrepared={this.onScaleCellPrepared}
            />
        );
    }
    onScaleCellPrepared: function(e) {
        var scaleElement = e.scaleElement;
        var color = "";
        var month = e.end.getMonth();
        if (month > 1 && month < 5) {
            color = "lightGreen";
        } else if (month > 4 && month < 8) {
            color = "green";
        } else if (month > 7 && month < 11) {
            color = "yellow";
        } else
            color = "white";
        scaleElement.style.backgroundColor = color;
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onScaleCellPrepared("gantt_scaleCellPrepared_handler")
    // ...
)
<script>
    function gantt_scaleCellPrepared_handler(e) {
        var scaleElement = e.scaleElement;
        var color = "";
        var month = e.end.getMonth();
        if (month > 1 && month < 5) {
            color = "lightGreen";
        } else if (month > 4 && month < 8) {
            color = "green";
        } else if (month > 7 && month < 11) {
            color = "yellow";
        } else
            color = "white";
        scaleElement.style.backgroundColor = color;
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onSelectionChanged: function (e) {
            if (e.selectedRowKey === 2) {
                // your code
            } else {
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @selection-changed="onSelectionChanged"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onSelectionChanged(e) {
            if (e.selectedRowKey === 2) {
                // your code
            } else {
                // your code
            }                                                                                
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onSelectionChanged={this.onSelectionChanged}
            />
        );
    }
    onSelectionChanged = (e) => {
        if (e.selectedRowKey === 2) {
            // your code
        } else {
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onSelectionChanged("gantt_selectionChanged_handler")
    // ...
)
<script>
    function gantt_selectionChanged_handler(e) {
        if (e.selectedRowKey === 2) {
            // your code
        } else {
            // your code
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskClick: function (e) {
            if (e.key != 0) {
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-click="onTaskClick"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskClick(e) {
            if (e.key != 0) {
                // your code
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskClick={this.onTaskClick}
            />
        );
    }
    onTaskClick = (e) => {
        if (e.key != 0) {
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskClick("gantt_taskClick_handler")
    // ...
)
<script>
    function gantt_taskClick_handler(e) {
        if (e.key != 0) {
            // your code
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskDblClick: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-dbl-click="onTaskDblClick"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskDblClick(e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskDblClick={this.onTaskDblClick}
            />
        );
    }
    onTaskDblClick = (e) => {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskDblClick("gantt_taskDblClick_handler")
    // ...
)
<script>
    function gantt_taskDblClick_handler(e) {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskDeleted: function (e) {
            if (e.key != 0) {
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-deleted="onTaskDeleted"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskDeleted(e) {
            if (e.key != 0) {
                // your code
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskDeleted={this.onTaskDeleted}
            />
        );
    }
    onTaskDeleted = (e) => {
        if (e.key != 0) {
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskDeleted("gantt_taskDeleted_handler")
    // ...
)
<script>
    function gantt_taskDeleted_handler(e) {
        if (e.key != 0) {
            // your code
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskDeleting: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-deleting="onTaskDeleting"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskDeleting(e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskDeleting={this.onTaskDeleting}
            />
        );
    }
    onTaskDeleting = (e) => {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskDeleting("gantt_taskDeleting_handler")
    // ...
)
<script>
    function gantt_taskDeleting_handler(e) {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskEditDialogShowing: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-edit-dialog-showing="onTaskEditDialogShowing"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskEditDialogShowing(e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskEditDialogShowing={this.onTaskEditDialogShowing}
            />
        );
    }
    onTaskEditDialogShowing = (e) => {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskEditDialogShowing("gantt_taskEditDialogShowing_handler")
    // ...
)
<script>
    function gantt_taskEditDialogShowing_handler(e) {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskInserted: function (e) {
            if (e.values.text == " ") {
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-inserted="onTaskInserted"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskInserted(e) {
            if (e.values.text == " ") {
                // your code
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskInserted={this.onTaskInserted}
            />
        );
    }
    onTaskInserted = (e) => {
        if (e.values.text == " ") {
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskInserted("gantt_taskInserted_handler")
    // ...
)
<script>
    function gantt_taskInserted_handler(e) {
        if (e.values.text == " ") {
            // your code
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskInserting: function (e) {
            if (e.values.text == " ") {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-inserting="onTaskInserting"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskInserting(e) {
            if (e.values.text == " ") {
                // your code
                e.cancel = true;
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskInserting={this.onTaskInserting}
            />
        );
    }
    onTaskInserting = (e) => {
        if (e.values.text == " ") {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskInserting("gantt_taskInserting_handler")
    // ...
)
<script>
    function gantt_taskInserting_handler(e) {
        if (e.values.text == " ") {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskMoving: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-moving="onTaskMoving"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskMoving(e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskMoving={this.onTaskMoving}
            />
        );
    }
    onTaskMoving = (e) => {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskMoving("gantt_taskMoving_handler")
    // ...
)
<script>
    function gantt_taskMoving_handler(e) {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskUpdated: function (e) {
            if (e.key != 0) {
                // your code
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-updated="onTaskUpdated"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskUpdated(e) {
            if (e.key != 0) {
                // your code
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskUpdated={this.onTaskUpdated}
            />
        );
    }
    onTaskUpdated = (e) => {
        if (e.key != 0) {
            // your code
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskUpdated("gantt_taskUpdated_handler")
    // ...
)
<script>
    function gantt_taskUpdated_handler(e) {
        if (e.key != 0) {
            // your code
        }
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        // ...
        onTaskUpdating: function (e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    });
}); 

<template>
    <DxGantt
        ...
        @task-updating="onTaskUpdating"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxGantt from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        onTaskUpdating(e) {
            if (e.key != 0) {
                // your code
                e.cancel = true;
            }
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Gantt from 'devextreme-react/gantt';

class App extends React.Component {
    // ...
    render() {
        return (
            <Gantt
                 //...
                 onTaskUpdating={this.onTaskUpdating}
            />
        );
    }
    onTaskUpdating = (e) => {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
}
export default App;

@(Html.DevExtreme().Gantt()
    .ID("gantt")
    .onTaskUpdating("gantt_taskUpdating_handler")
    // ...
)
<script>
    function gantt_taskUpdating_handler(e) {
        if (e.key != 0) {
            // your code
            e.cancel = true;
        }
    }
</script>

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .ResourceAssignments(ra => ra
        .DataSource(ds => ds.Array().Data(SampleData.GanttResourceAssignments).Key("ID"))
        .KeyExpr("ID")
        .TaskIdExpr("TaskId")
        .ResourceIdExpr("ResourceId")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<ResourceAssignment> GanttResourceAssignments = new[] {
        new ResourceAssignment { ID = 0, TaskId = 3, ResourceId = 1 },
        new ResourceAssignment { ID = 1, TaskId = 4, ResourceId = 1 },
        // ...
    }
    // ...
}

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .ResourceAssignments(ra => ra
        .DataSource(ds => ds.Array().Data(SampleData.GanttResourceAssignments).Key("ID"))
        .KeyExpr("ID")
        .TaskIdExpr("TaskId")
        .ResourceIdExpr("ResourceId")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<ResourceAssignment> GanttResourceAssignments = new[] {
        new ResourceAssignment { ID = 0, TaskId = 3, ResourceId = 1 },
        new ResourceAssignment { ID = 1, TaskId = 4, ResourceId = 1 },
        // ...
    }
    // ...
}

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Resources(r => r
        .DataSource(ds => ds.Array().Data(SampleData.GanttResources).Key("ID"))
        .KeyExpr("ID")
        .TextExpr("Text")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Resource> GanttResources = new[] {
        new Resource { ID = 1, Text = "Management" },
        new Resource { ID = 2, Text = "Project Manager" },
        // ...
    }
    // ...
}

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Resources(r => r
        .DataSource(ds => ds.Array().Data(SampleData.GanttResources).Key("ID"))
        .KeyExpr("ID")
        .TextExpr("Text")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Resource> GanttResources = new[] {
        new Resource { ID = 1, Text = "Management" },
        new Resource { ID = 2, Text = "Project Manager" },
        // ...
    }
    // ...
}

$(function() {
    $("#gantt").dxGantt({
        scaleType: 'hours',
        // ...
    });
}); 

<template>
    <DxGantt
        :scale-type="hours" >
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            scaleType="hours" >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .ScaleType(GanttScaleType.Weeks)
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        scaleTypeRange: {
            min: 'days',
            max: 'years'
        },
        // ...
    });
});

<template>
    <DxGantt ... >
        <DxScaleTypeRange
            min="days"
            max="years"
        />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxScaleTypeRange, 
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, 
            DxScaleTypeRange, 
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    ScaleTypeRange , 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <ScaleTypeRange
                min="days"
                max="years" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .ScaleTypeRange(e => {
        e.Min(GanttScaleType.Days)
        e.Max(GanttScaleType.Years)
    })
    // ...
)

@(Html.DevExtreme().Gantt()
    .ScaleTypeRange(e => {
        e.Min(GanttScaleType.Days)
        e.Max(GanttScaleType.Years)
    })
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        selectedRowKey: 1,
        // ...
    });
}); 

<template>
    <DxGantt
        :selected-row-key="1" >
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            selectedRowKey={1} >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .SelectedRowKey(1)
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        showResources: false,
        // ...
    });
}); 

<template>
    <DxGantt
        :show-resources="false" >
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            showResources={false} >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .ShowResources(false)
    // ...
)

<!-- Razor C# -->
@(Html.DevExtreme().Gantt()
    .ShowResources(false)
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        showResources: false,
        // ...
    });
}); 

<template>
    <DxGantt
        :show-resources="false" >
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            showResources={false} >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .ShowResources(false)
    // ...
)

<!-- Razor C# -->
@(Html.DevExtreme().Gantt()
    .ShowResources(false)
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        showRowLines: false,
        // ...
    });
}); 

<template>
    <DxGantt
        :show-row-lines="false" >
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            showRowLines={false} >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .ShowRowLines(false)
    // ...
)

<!-- Razor C# -->
@(Html.DevExtreme().Gantt()
    .ShowRowLines(false)
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        sorting: {
            mode: 'multiple',
            showSortIndexes: true,
            ascendingText: "Ascending Order",
            descendingText: "Descending Order",
            clearText: "Clear Sort"
        }           
    });
}); 

<template>
    <DxGantt ... >
        <DxSorting
            mode="multiple"
            :show-sort-indexes="true"
            ascending-text="Ascending Order"
            descending-text="Descending Order"
            clear-text="Clear Sort" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxSorting, 
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, 
            DxSorting, 
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Sorting, 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <Sorting 
                mode="multiple"
                showSortIndexes={true}
                ascendingText="Ascending Order" 
                descendingText="Descending Order"
                clearText="Clear Sort" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .Sorting(s => {
        s.Mode(GridSortingMode.Multiple)
        s.ShowSortIndexes(true)
        s.AscendingText("Ascending Order")
        s.DescendingText("Descending Order")
        s.ClearText("Clear Sort")
    })
    // ...
)

@(Html.DevExtreme().Gantt()
    .Sorting(s => {
        s.Mode(GridSortingMode.Multiple)
        s.ShowSortIndexes(true)
        s.AscendingText("Ascending Order")
        s.DescendingText("Descending Order")
        s.ClearText("Clear Sort")
    })
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        startDateRange: new Date(2018, 01, 1),
        endDateRange: new Date(2020, 01, 1)
        // ...
    });
});

<template>
    <DxGantt
        :start-date-range="startDateRange"
        :end-date-range="endDateRange">
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        },
        data() {
            return {
                startDateRange: new Date(2018, 12, 1),
                endDateRange: new Date(2020, 12, 1),
            }
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    const startDateRange = new Date(2018, 1, 1);
    const endDateRange = new Date(2020, 1, 1);

    return (
        <Gantt
            startDateRange = {startDateRange}
            endDateRange = {endDateRange} >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .StartDateRange(new Date("January 1, 2018"))
    .EndDateRange(new Date("January 1, 2020"))
    // ...
)

@(Html.DevExtreme().Gantt()
    .StartDateRange(new Date("January 1, 2018"))
    .EndDateRange(new Date("January 1, 2020"))
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        stripLines: [{
            title: "Start",
            start: tasks[0].start
        }, {
            title: "Final Phase",
            start: tasks[tasks.length - 3].start,
            end: tasks[tasks.length - 1].end,
        }, {
            title: "Current Time",
            start: new Date(),
            cssClass: "current-time"
        }],
        //...
    });
});

<template>
    <DxGantt >
        <DxStripLine
            :start="tasks[0].start"
            title="Start"
        />
        <DxStripLine
            :start="tasks[tasks.length - 3].start"
            :end="tasks[tasks.length - 1].end"
            title="Final Phase"
        />
        <DxStripLine
            :start="currentTime"
            title="Current Time"
            css-class="current-time"
        />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, DxStripLine
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, DxStripLine
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt>
            <StripLine start={tasks[0].start} title="Start" />
            <StripLine start={tasks[tasks.length - 3].start} end={tasks[tasks.length - 1].end} title="Final Phase" />
            <StripLine start={currentDate} title="Current Time" cssClass="current-time" />                
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .StripLines(s => {
        s.Add().Title("Start")
                .Start(SampleData.GanttTasksJohnsonResidence.First().Start);
        s.Add().Title("Final Phase")
                .Start(SampleData.GanttTasksJohnsonResidence.Where(t => t.ID == 20).First().Start)
                .End(SampleData.GanttTasksJohnsonResidence.Where(t => t.ID == 22).First().End);
        s.Add().Title("Current Time")
                .Start(DateTime.Now)
                .CssClass("current-time");
    })
    // ...
)

@(Html.DevExtreme().Gantt()
    .StripLines(s => {
        s.Add().Title("Start")
                .Start(SampleData.GanttTasksJohnsonResidence.First().Start);
        s.Add().Title("Final Phase")
                .Start(SampleData.GanttTasksJohnsonResidence.Where(t => t.ID == 20).First().Start)
                .End(SampleData.GanttTasksJohnsonResidence.Where(t => t.ID == 22).First().End);
        s.Add().Title("Current Time")
                .Start(DateTime.Now)
                .CssClass("current-time");
    })
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        taskContentTemplate: getTaskContentTemplate,
        // ...
    });
}); 

function getTaskContentTemplate(item, container) {
    var $customContainer = $(document.createElement("div")) 
        .addClass("custom-task") 
        .text(item.taskData.title) 
        .attr("style", "width:" + item.taskSize.width + "px"); 
    return $customContainer; 
}

<template>
    <DxGantt 
        :task-content-template="myTaskTemplate" >
        <template #myTaskTemplate="{ data : item }">
            <div [style.width.px]="item.taskSize.width" class="custom-task">{{item.taskData.title}}</div>
            <!-- ... -->
        </template>                       
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxGantt } from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        //...
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

import React from 'react';
import Gantt from 'devextreme-react/gantt';
import { Template } from 'devextreme-react/core/template';

const TaskTemplate = (item) => {
    return ( 
        <div className="custom-task" style={{width: item.taskSize.width + "px"}}> 
            <div className="custom-task-title">{item.taskData.title}</div> 
        </div> 
    );         
}

export default function App() {
    return (
        <Gantt 
            taskContentRender={TaskTemplate}>
            //...
        </Gantt>
    );  
}

export default App;

@(Html.DevExtreme().Gantt()
    .TaskContentTemplate(new JS("getTaskContentTemplate"))
    // ...
)

<script>
    function getTaskContentTemplate(task, container) {
        var $customContainer = $(document.createElement("div"))
            .addClass("custom-task");
            .text(item.Task.Title);
            .attr("style", "width:" + item.TaskSize.Width + "px"); 
        return $customContainer;
    }    
</script>

$(function() {
    $("#gantt").dxGantt({
        taskListWidth: 200,
        // ...
    });
}); 

<template>
    <DxGantt
        :task-list-width="200" >
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            taskListWidth={200} >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .TaskListWidth(200)
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        taskProgressTooltipContentTemplate: getTaskProgressTooltipContentTemplate,
        // ...
    });
}); 

function getTaskProgressTooltipContentTemplate(item, container) {
    var $customTooltipProgress = $(document.createElement("div"))
        .addClass("custom-tooltip");
    $(document.createElement("div"))
        .addClass("custom-tooltip-progress")
        .text("Progress: " + item.progress + "%")
        .appendTo($customTooltipProgress);
    // ...
    return $customTooltipProgress;
}

<template>
    <DxGantt 
        :task-progress-tooltip-content-template="myTaskProgressTooltipTemplate" >
        <template #myTaskProgressTooltipTemplate="{ data: item }">
            <div class="custom-tooltip">
                <div class="custom-tooltip-progress">Progress: {{ item.progress }}%</div>
                <!-- ... -->
            </div>            
        </template>
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxGantt } from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        //...
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

import React from 'react';
import Gantt from 'devextreme-react/gantt';
import { Template } from 'devextreme-react/core/template';

const TaskProgressTooltipTemplate = (item) => {
    return ( 
        <div className="custom-tooltip">
            <div className="custom-tooltip-progress">Progress: {item.progress}%</div>
            <!-- ... -->
        </div>            
    );         
}

export default function App() {
    return (
        <Gantt
            taskProgressTooltipContentRender={TaskProgressTooltipTemplate}>
            //...
        </Gantt>
    );
}

export default App;

@(Html.DevExtreme().Gantt()
    .TaskProgressTooltipContentTemplate(new JS("getTaskProgressTooltipContentTemplate"))
    // ...
)

<script>
    function getTaskProgressTooltipContentTemplate(item, container) {
        var $customTooltipProgress = $(document.createElement("div"))
            .addClass("custom-tooltip");
    ​
        $(document.createElement("div"))
            .addClass("custom-tooltip-progress")
            .text("Progress: " + item.progress + "%")
            .appendTo($customTooltipProgress);
        // ...
        return $customTooltipProgress;
    }
</script>

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Tasks(t => t
        .DataSource(ds => ds.Array().Data(SampleData.GanttTasks).Key("ID"))
        .KeyExpr("ID")
        .TitleExpr("Title")
        .ParentIdExpr("ParentId")
        .StartExpr("Start")
        .EndExpr("End")
        .ProgressExpr("Progress")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Task> GanttTasks = new[] {
        new Task {
            ID = 1,
            ParentId = 0,
            Title = "Software Development",
            Start = DateTime.Parse("2019-02-21T05:00:00.000Z"),
            End = DateTime.Parse("2019-07-04T12:00:00.000Z"),
            Progress = 31
        },        
        // ...
    }
    // ...
}

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Tasks(t => t
        .DataSource(ds => ds.Array().Data(SampleData.GanttTasks).Key("ID"))
        .KeyExpr("ID")
        .TitleExpr("Title")
        .ParentIdExpr("ParentId")
        .StartExpr("Start")
        .EndExpr("End")
        .ProgressExpr("Progress")
    )
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Task> GanttTasks = new[] {
        new Task {
            ID = 1,
            ParentId = 0,
            Title = "Software Development",
            Start = DateTime.Parse("2019-02-21T05:00:00.000Z"),
            End = DateTime.Parse("2019-07-04T12:00:00.000Z"),
            Progress = 31
        },        
        // ...
    }
    // ...
}

$(function() {
    $("#gantt").dxGantt({
        taskTimeTooltipContentTemplate: getTaskTimeTooltipContentTemplate,
        // ...
    });
}); 

function getTaskTimeTooltipContentTemplate(item, container) {
    var $customTooltipTime = $(document.createElement("div"))
        .addClass("custom-tooltip");
    $(document.createElement("div"))
        .addClass("custom-tooltip-time")
        .text("End Date: " + item.end)
        .appendTo($customTooltipTime);
    // ...
    return $customTooltipTime;
}

<template>
    <DxGantt 
        :task-time-tooltip-content-template="myTaskTimeTooltipTemplate" >
        <template #myTaskTimeTooltipTemplate="{ data: item }">
            <div class="custom-tooltip">
                <div class="custom-tooltip-time">End Date: {{item.end}}</div>
                <!-- ... -->
            </div>
        </template>
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxGantt } from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        //...
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

import React from 'react';
import Gantt from 'devextreme-react/gantt';
import { Template } from 'devextreme-react/core/template';

const TaskTimeTooltipTemplate = (item) => {
    return ( 
        <div className="custom-tooltip">
            <div className="custom-tooltip-time">End Date: {item.end}</div>
            <!-- ... -->
        </div>
    );         
}

export default function App() {
    return (
        <Gantt
            taskTimeTooltipContentRender={TaskTimeTooltipTemplate}>
            //...
        </Gantt>
    );
}

export default App;

@(Html.DevExtreme().Gantt()
    .TaskTimeTooltipContentTemplate(new JS("getTaskTimeTooltipContentTemplate"))
    // ...
)

<script>
    function getTaskTimeTooltipContentTemplate(item, container) {
        var $customTooltipTime = $(document.createElement("div"))
            .addClass("custom-tooltip");
​
        $(document.createElement("div"))
            .addClass("custom-tooltip-time")
            .text("End Date: " + item.end)
            .appendTo($customTooltipTime);
        // ...
        return $customTooltipTime;
    }
</script>

$(function() {
    $("#gantt").dxGantt({
        taskTitlePosition: 'none',
        // ...
    });
}); 

<template>
    <DxGantt
        :task-title-position="none" >
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt
            taskTitlePosition="none" >
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .TaskTitlePosition(GanttTaskTitlePosition.None)
    // ...
)

$(function() {
    $("#gantt").dxGantt({
        taskTooltipContentTemplate: getTaskTooltipContentTemplate,
        // ...
    });
}); 

function getTaskTooltipContentTemplate(task, container) {
    var $customTooltip = $(document.createElement("div"))
        .addClass("custom-task-edit-tooltip");
    $(document.createElement("div"))
        .addClass("custom-tooltip-title")
        .text(task.title)
        .appendTo($customTooltip);
    // ...
    return $customTooltip;
}

<template>
    <DxGantt 
        :task-tooltip-content-template="myTooltipContentTemplate" >
        <template #myTooltipContentTemplate="{ data: task }">
            <div class="custom-task-edit-tooltip">
                <div class="custom-tooltip-title">{{ task.title }}</div>
                <!-- ... -->
            </div>
        </template>
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxGantt } from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt
    },
    methods: {
        //...
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

import React from 'react';
import Gantt from 'devextreme-react/gantt';
import { Template } from 'devextreme-react/core/template';

const TaskTooltipTemplate = (task) => {
    return ( 
        <div class="custom-task-edit-tooltip">
            <div class="custom-tooltip-title">{{ task.title }}</div>
            <!-- ... -->
        </div>
    );         
}

export default function App() {
    return (
        <Gantt
            taskTooltipContentRender={TaskTooltipTemplate}>
            //...
        </Gantt>
    );
}

export default App;

@(Html.DevExtreme().Gantt()
    .TaskTooltipContentTemplate(new JS("getTaskTooltipContentTemplate"))
    // ...
)

<script>
    function getTaskTooltipContentTemplate(task, container) {
        var $customTooltip = $(document.createElement("div"))
            .addClass("custom-task-edit-tooltip");

        $(document.createElement("div"))
            .addClass("custom-tooltip-title")
            .text(task.Title)
            .appendTo($customTooltip);
        // ...

        return $customTooltip;            
    }    
</script>

$(function() {
    $("#gantt").dxGantt({
        validation: {
            autoUpdateParentTasks: true,
            validateDependencies: true
        },
        // ...
    });
});

<template>
    <DxGantt ... >
        <DxValidation
            :auto-update-parent-tasks="true"
            :validate-dependencies="true" 
         />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxValidation, 
        // ... 
    } from 'devextreme-vue/gantt';

    export default {
        components: { 
            DxGantt, 
            DxValidation, 
            // ... 
        }
    };
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Validation, 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <Validation
                autoUpdateParentTasks={true}
                validateDependencies={true} />
            {/* ... */}
        </Gantt>
    );
};

export default App;

@(Html.DevExtreme().Gantt()
    .Validation(e => {
        e.AutoUpdateParentTasks(true)
        e.ValidateDependencies(true)
    })
    // ...
)

@(Html.DevExtreme().Gantt()
    .Validation(e => {
        e.AutoUpdateParentTasks(true)
        e.ValidateDependencies(true)
    })
    // ...
)