Gantt

Example

Razor

<kendo-gantt>
    <assignments></assignments>
    <columns></columns>
    <current-time-marker />
    <dependency-datasource></dependency-datasource>
    <editable></editable>
    <gantt-datasource></gantt-datasource>
    <gantt-task-template></gantt-task-template>
    <messages />
    <pdf></pdf>
    <range />
    <resources></resources>
    <toolbars></toolbars>
    <tooltip></tooltip>
    <views />
</kendo-gantt>

ChildTags

Tag Name	Details
assignments	GanttAssignmentsSettingsTagHelper
columns	GanttColumnsTagHelper
current-time-marker	GanttCurrentTimeMarkerSettingsTagHelper
dependency-datasource	GanttDependencyDataSourceTagHelper
editable	GanttEditableSettingsTagHelper
gantt-datasource	GanttDataSourceTagHelper
gantt-task-template	TemplateTagHelper
messages	GanttMessagesSettingsTagHelper
pdf	GanttPdfSettingsTagHelper
range	GanttRangeSettingsTagHelper
resources	GanttResourcesSettingsTagHelper
toolbars	GanttToolbarsTagHelper
tooltip	GanttTooltipSettingsTagHelper
views	GanttViewsTagHelper

Attributes

Attribute	Type	Description
name	String	Sets the name of the component.
as-module	Boolean	Specifies whether the initialization script of the component will be rendered as a JavaScript module.
is-in-client-template	Boolean	When placing a Tag Helper within a Kendo Template, set the type to text/html and add the is-in-client-template="true" attribute.
deferred	Boolean	Suppress initialization script rendering. Note that this options should be used in conjunction with DeferredScripts method.
auto-bind	Boolean	If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.
column-menu	Boolean	If set to true, the Gantt displays the column menu when the user clicks the Chevron icon in the column headers. The column menu allows the user to show and hide columns, and, if filtering and sorting are enabled, filter and sort the data. By default, the column menu is disabled. Can be set to a JavaScript object which represents the column menu configuration.
column-resize-handle-width	Double	Defines the width of the column resize handle in pixels. Apply a larger value for easier grasping.
datasource-id	String	The ID/Name of the GanttDataSource tag helper
date	DateTime	If set to some date and it is between the range start and range end of the selected view, the timeline of the currently selected view is scrolled to start from this date.
dependancy-datasource-id	String	The ID/Name of the GanttDependencyDataSource tag helper
filterable	Boolean	If set to true, the user can filter the data source by using the Gantt filter menu. By default, filtering is disabled. Can be set to a JavaScript object which represents the filter menu configuration.
height	Double	The height of the widget. Numeric values are treated as pixels.
hour-span	Double	The span of an hour slot.
list-width	String	The width of the task list. Numeric values are treated as pixels.
navigatable	Boolean	If set to true the user could navigate the widget using the keyboard. By default keyboard navigation is enabled.
on-add	String	The name of the JavaScript function that will handle the add event. Fired when a new task or a new dependency is about to be added.The event handler function context (available via the this keyword) will be set to the widget instance.
on-cancel	String	The name of the JavaScript function that will handle the cancel event. Fired when the user cancels tasks's cell editing by pressing the 'Esc' key.The event handler function context (available via the this keyword) will be set to the widget instance.
on-change	String	The name of the JavaScript function that will handle the change event. Fired when the user selects a task in the Gantt.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-hide	String	The name of the JavaScript function that will handle the columnHide event. Fires when the user hides a column. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-reorder	String	The name of the JavaScript function that will handle the columnReorder event. Fires when the user changes the order of a column. The event handler function context (available through the this keyword) will be set to the widget instance.
on-column-resize	String	The name of the JavaScript function that will handle the columnResize event. Fired when the user resizes a column.The event handler function context (available via the this keyword) will be set to the widget instance.
on-column-show	String	The name of the JavaScript function that will handle the columnShow event. Fires when the user shows a column. The event handler function context (available through the this keyword) will be set to the widget instance.
on-data-binding	String	The name of the JavaScript function that will handle the dataBinding event. Fired before the widget binds to its data source.The event handler function context (available via the this keyword) will be set to the widget instance.
on-data-bound	String	The name of the JavaScript function that will handle the dataBound event. Fired when the widget is bound to data from its data source.The event handler function context (available via the this keyword) will be set to the widget instance.
on-edit	String	The name of the JavaScript function that will handle the edit event. Fired when the user starts task edit upon double click on a cell.The event handler function context (available via the this keyword) will be set to the widget instance.
on-move	String	The name of the JavaScript function that will handle the moveStart event. Fired when the user starts to drag a task.The event handler function context (available via the this keyword) will be set to the widget instance.
on-move-end	String	The name of the JavaScript function that will handle the moveEnd event. Fired when the user stops moving a task.The event handler function context (available via the this keyword) will be set to the widget instance.
on-move-start	String	The name of the JavaScript function that will handle the moveStart event. Fired when the user starts to drag a task.The event handler function context (available via the this keyword) will be set to the widget instance.
on-navigate	String	The name of the JavaScript function that will handle the navigate event. Fired when the user changes the selected view of the Gantt.The event handler function context (available via the this keyword) will be set to the widget instance.
on-pdf-export	String	The name of the JavaScript function that will handle the pdfExport event. Fired when the user clicks the "Export to PDF" toolbar button.
on-remove	String	The name of the JavaScript function that will handle the remove event. Fired when a task or a dependency is about to be removed.The event handler function context (available via the this keyword) will be set to the widget instance.
on-resize	String	The name of the JavaScript function that will handle the resizeStart event. Fired when the user starts to resize a task.The event handler function context (available via the this keyword) will be set to the widget instance.
on-resize-end	String	The name of the JavaScript function that will handle the resizeEnd event. Fired when the user releases the mouse after resizing a task.The event handler function context (available via the this keyword) will be set to the widget instance.
on-resize-start	String	The name of the JavaScript function that will handle the resizeStart event. Fired when the user starts to resize a task.The event handler function context (available via the this keyword) will be set to the widget instance.
on-save	String	The name of the JavaScript function that will handle the save event. Fired when a task field is updated upon user interaction.The event handler function context (available via the this keyword) will be set to the widget instance.
on-toggle-planned-tasks	String	The name of the JavaScript function that will handle the togglePlannedTasks event. The event will be raised upon Toolbar PlannedTasks Switch click. As a result, the planned tasks will be either hidden or shown in the Gantt Timeline view. The event is preventable.The event handler function context (available via the this keyword) will be set to the widget instance.
reorderable	Boolean	If set to true, the user can reorder the columns in the GanttList section of the widget by dragging their header cells. By default, reordering is disabled.
resizable	Boolean	If set to true allows users to resize columns by dragging their header borders. By default resizing is disabled.
row-height	Double	The height of the table rows. Numeric values are treated as pixels.
script-attributes	IDictionary<String,Object>	Sets the attributes that will be added to the script tag of the component's initialization script.
selectable	Boolean	If set to false the user won't be able to select tasks in the Gantt. By default selection is enabled and triggers the change event.
show-planned-tasks	Boolean	If set to true, the Gantt Timeline will render both the planned and the actual execution of tasks. In order to display properly, the Planned vs. Actual view would need the plannedStart and plannedEnd date fields for tasks to be set.
show-work-days	Boolean	If set to false, Gantt views will show all days of the week. By default the views display only business days.
show-work-hours	Boolean	If set to false, the day view will show all hours of the day. By default the view displays only business hours.
snap	Boolean	If set to true the Gantt will snap tasks to the nearest slot during dragging (resizing or moving). Set it to false to allow free moving and resizing of tasks.
task-template	String	The template used to render the gantt tasks.The fields which can be used in the template are the task fields
task-template-handler	String	The template used to render the gantt tasks.The fields which can be used in the template are the task fields This option expects the name of a JavaScript function that will be called to return the template.
task-template-id	String	The template used to render the gantt tasks.The fields which can be used in the template are the task fields This option expects the ID of the script element that contains the template.
task-template-view	IHtmlContent	The template used to render the gantt tasks.The fields which can be used in the template are the task fields This option expects the instance containing the created HTML.
work-day-end	DateTime	Sets the end of the work day.
work-day-start	DateTime	Sets the start of the work day.
work-week-end	Double	The end of working week (index based).
work-week-start	Double	The start of working week (index based).