New to Kendo UI for jQuery? Start a free 30-day trial

Resources

configuration

The configuration of the gantt resource(s). A gantt resource is optional metadata that can be associated with a gantt task.

resources

Object

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
    dataSource: [
        { id: 1, title: "Task 1", start: new Date("2023/1/1"), end: new Date("2023/1/5") }
    ],
    resources: {
        dataSource: [
            { id: 1, name: "Resource 1", color: "#ff6666" },
            { id: 2, name: "Resource 2", color: "#66ff66" }
        ],
        dataTextField: "name",
        dataColorField: "color"
    },
    assignments: {
        dataSource: [
            { taskId: 1, resourceId: 1, units: 1 }
        ]
    }
});
</script>

resources.dataColorField

String

The field of the resource data item which contains the resource color.

Default: "color"

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 0,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/7/01 11:00")
  }],
  resources: {
    dataColorField: "key",
    dataSource: [
      { id: 0, name: "Resource 1", key: "green" },
      { id: 1, name: "Resource 2", key: "#32cd32" }
    ]
  },
  assignments: {
    dataSource: [
      { taskId: 0, resourceId: 1, value: 1 }
    ]
  },
  views: ["week"]
});
</script>

resources.dataFormatField

String

The field of the resource data item containing the format of the resource value, which could be assigned to a gantt task. The data item format value could be any valid kendo format.

Default: "format"

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 0,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/7/01 11:00")
  }],
  resources: {
    dataFormatField: "unit",
    dataSource: [
      { id: 0, name: "Resource 1", color: "green", unit: "p0" },
      { id: 1, name: "Resource 2", color: "#32cd32", unit: "p0" }
    ]
  },
  assignments: {
    dataSource: [
      { taskId: 0, resourceId: 1, value: 1 }
    ]
  },
  views: ["week"],
  columns: [
    { field: "title", title: "Title" },
    { field: "resources", title: "Task Resources" }
  ]
});
</script>

resources.dataSource

Object|Array|kendo.data.DataSource

The data source which contains resource data items. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.DataSource instance.

If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.DataSource instance using that value as data source configuration.

If the dataSource option is an existing kendo.data.DataSource instance the widget will use that instance and will not initialize a new one.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 0,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/7/01 11:00")
  }],
  resources: {
    dataSource: [
      { id: 0, name: "Resource 1", color: "green" },
      { id: 1, name: "Resource 2", color: "#32cd32" }
    ]
  },
  assignments: {
    dataSource: [
      { taskId: 0, resourceId: 1, value: 1 }
    ]
  },
  views: ["week"]
});
</script>

resources.dataTextField

String

The field of the resource data item which represents the resource text.

Default: "text"

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 0,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/7/01 11:00")
  }],
  resources: {
    dataTextField: "resource",
    dataSource: [
      { id: 0, resource: "Resource 1", color: "green" },
      { id: 1, resource: "Resource 2", color: "#32cd32" }
    ]
  },
  assignments: {
    dataSource: [
      { taskId: 0, resourceId: 1, value: 1 }
    ]
  },
  views: ["week"]
});
</script>

resources.field

String

The field of the gantt task which contains the assigned resource objects.

Default: "resources"

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 0,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/7/01 11:00")
  }],
  resources: {
    field: "taskResources",
    dataSource: [
      { id: 0, name: "Resource 1", color: "green", format: "p0" },
      { id: 1, name: "Resource 2", color: "#32cd32", format: "p0" }
    ]
  },
  assignments: {
    dataSource: [
      { taskId: 0, resourceId: 1, value: 1 }
    ]
  },
  views: ["week"],
  columns: [
    { field: "title", title: "Title" },
    { field: "taskResources", title: "Task Resources" }
  ]
});
</script>