Gantt TagHelper Overview

The Telerik UI Gantt TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI Gantt widget.

The Gantt displays a set of tasks and dependencies which are used to visualize project-planning data. It provides a TreeList section where the user can edit the tasks, and sort and reorder them in a grid-like fashion, and a Timeline section where the tasks and dependencies are visualized under an adjustable time ruler. The user can resize, move, edit and remove them. The Gantt also supports the display of the Timeline section in the day, week, and month views.

Telerik UI for ASP.NET Core Ninja image

The Gantt is part of Telerik UI for ASP.NET Core, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the Gantt

The following example demonstrates how to define the Gantt by using the Gantt TagHelper.

<kendo-gantt name="gantt" show-work-days="false" show-work-hours="false" snap="false" height="700">
    <columns>
        <gantt-column field="title" title="Title" editable="true" sortable="true"></gantt-column>
        <gantt-column field="resources" title="Assigned Resources" editable="true" sortable="true"></gantt-column>
    </columns>
    <views>
        <gantt-view type="GanttViewType.Day"></gantt-view>
        <gantt-view type="GanttViewType.Week"></gantt-view>
        <gantt-view type="GanttViewType.Month" selected="true"></gantt-view>
    </views>
    <gantt-datasource type="DataSourceTagHelperType.Ajax">
        <transport>
            <read url="@Url.Action("ReadTasks","Gantt")" />
        </transport>
        <schema>
            <model id="TaskID">
                <fields>
                    <field name="TaskID" type="number"></field>
                    <field name="parentId" from="ParentID" type="number"></field>
                    <field name="title" from="Title" type="string"></field>
                    <field name="start" from="Start" type="date"></field>
                    <field name="end" from="End" type="date"></field>
                    <field name="summary" from="Summary" type="boolean"></field>
                    <field name="expanded" from="Expanded" type="boolean" default-value="true"></field>
                    <field name="percentComplete" from="PercentComplete" type="number"></field>
                    <field name="orderId" from="OrderId" type="number"></field>
                </fields>
            </model>
        </schema>
    </gantt-datasource>
</kendo-gantt>

Basic Configuration

With the attributes and inner tags you can define the columns, views, DataSource, messages, range and all other widget options available from the API of the Gantt widget.

<kendo-gantt name="gantt" show-work-days="false" show-work-hours="false" snap="false" height="700">
    <tooltip visible="false" />
    <current-time-marker enabled="false" />
    <messages>
        <views day="MyDay" week="MyWeek" month="MyMonth" />
    </messages>
    <columns>
        <gantt-column field="title" title="Title" editable="true" sortable="true"></gantt-column>
        <gantt-column field="resources" title="Assigned Resources" editable="true" sortable="true"></gantt-column>
    </columns>
    <views>
        <gantt-view type="GanttViewType.Day"></gantt-view>
        <gantt-view type="GanttViewType.Week"></gantt-view>
        <gantt-view type="GanttViewType.Month" selected="true"></gantt-view>
    </views>
</kendo-gantt>

Functionality and Features

The Gantt provides options for binding it to data.

See Also

In this article
Not finding the help you need? Improve this article