Kendo Gantt Chart

Berikut adalah contoh Kendo Gantt Chart dengan beberapa setting / kustomisasi:

• Header di kolom day menjadi format ‘bulan / tanggal’, contohnya ‘4/1’ – menggunakan views
• Lebar list (aktivitas & %) – menggunakan listWidth
• Default menampilkan tanggal hari ini – menggunakan date
• Ketika % di-klik mengganti halaman – menggunakan dataBound

var tasksDataSource = new kendo.data.GanttDataSource({
    transport: {
        read: {
            url: "@Url.Action("BindingTask", "Project", new { projectId = Model.Id })",
            dataType: "json",
        },
    },
    schema: {
        model: {
            id: "id",
            fields: {
                id: { from: "TaskId", type: "number" },
                //orderId: { from: "OrderID", type: "number", validation: { required: true } },
                //parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
                start: { from: "PlanStartDate", type: "date" },
                end: { from: "PlanFinishDate", type: "date" },
                title: { from: "TaskName", defaultValue: "", type: "string" },
                percentComplete: { from: "Progress", type: "number" },
                summary: { from: "Summary", type: "boolean" },
                expanded: { from: "Expanded", type: "boolean", defaultValue: true }
            }
        }
    },
});

var gantt = $("#gantt").kendoGantt({
    dataSource: tasksDataSource,
    views: [
        "day",
        { type: "week", selected: true },
        "month"
    ],
    columns: [
        //{ field: "id", title: "ID", width: 60 },
        { field: "title", title: "Aktivitas", width: 225, },
        {
            field: "percentComplete",
            title: "%",
            width: 50,
        },
    ],
    views: [
        {
            type: "day",
        },
        {
            type: "week",
            //weekHeaderTemplate: kendo.template("#=kendo.toString(start, 'M/d')#"),
            dayHeaderTemplate: kendo.template("#=kendo.toString(start, 'M/d')#"),
            selected: true,
            slotSize: 50,
        },
        { type: "month" }
    ],

    height: 700,
    listWidth: 275,

    showWorkHours: false,
    showWorkDays: false,

    snap: false,

    date: new Date(),

    toolbar: [],

    dataBound: onDataBound,
}).data("kendoGantt");

gantt.refresh();