Binding Gantt data source to local java-script array does not allow provide custom schema for data model.

[Dmitry]

Hello,
I used the following approach for binding Kendo Gantt data source to local java-script array.

var dataSourceArray = [{...}, {...}, ...];
var fieldsObject = {id: { from: "id", type: "string", defaultValue: function () { return kendo.guid(); } }, parentId: { from: "parentId", type: "string", defaultValue: null }, start: { from: "start", type: "date" }, end: { from: "end", type: "date" }, title: { from: "title", type: "string" }, percentComplete: { from: "percentComplete", type: "number" }};
//we have pre-filled java-script array and fieldsObject
//define Kendo Gantt data source

var _dataSource = new kendo.data.GanttDataSource({

            schema: {
                model: {
                    id: "id",
                    fields: fieldsObject
                }
            },
            transport: {
                read: function (e) {
                    e.success(dataSourceArray );
                },
                create: function (e) {
                    if (e.data.models && e.data.models.length > 0) {
//...

                        }
                    }
                    else {
                        //...
                    }
                },
                update: function (e) {
                    if (e.data.models && e.data.models.length > 0) {
//...

                        }
                    }
                    else {
                        //...
                    }
                },
                destroy: function (e) {
                    if (e.data.models && e.data.models.length > 0) {
//...                       
                    }

                    }
                    else {
                       //...
                }
            },
            change: function (e) {
                if (e.action == "add" || e.action == "remove") {
                   //...
                }
                if ((e.action == "itemchange" || e.action == "remove") && (e.field == "percentComplete" || e.field == "start" || e.field == "end")) {
                   
                    }
                }
            }
        });

//Then Kendo Gantt is created

_kendoGantt = $("#gantt").kendoGantt({
                toolbar: [
{ template: kendo.template($("#headerTemplate").html()) }
                ],
                pdf: { fileName: $scope.selectedGantt },
                dataSource: _dataSource,
                dependencies: _dependencies, //also defined above in the code
                columns: _leftCols, //also defined above in the code
                views: [{ type: "day", selected: _ganttSettings.Timescale == "day" ? true : false }, { type: "week", selected: _ganttSettings.Timescale == "week" ? true : false },
{ type: "month", selected: _ganttSettings.Timescale == "month" ? true : false }, { type: "year", selected: _ganttSettings.Timescale == "year" ? true : false }],
                listWidth: _listWidth,
                showWorkDays: !_showWeekends,
                dataBound: _onTaskDataBound,
                moveStart: _onTaskMoveStart,
                resizeStart: _onTaskMoveStart,
                save: _onTaskSave,
                remove: _onTaskRemove,
                navigate: _onTaskNavigate,
                add: _onTaskDependencyAdd,
                change: _onTaskChange,
                edit: _onTaskEdit,
                height: _gHeight
            });

function _onTaskEdit(e) {
if(e.task.id){
//....
}
};

This code worked perfectly in version of Kendo UI v2016.3.1118, but it does not work in version v2021.2.616.

Using this code in version v2021.2.616 does not display any tasks in Kendo Gantt.

If I bind data source to local java-script array directly in Kendo Gantt constructor (dataSource: dataSourceArray), it displays tasks, but task does not have valid "id" (it is null) in event _onTaskEdit (when I double click task for editing). In this case id field must have string value according to: id: { from: "id", type: "string", defaultValue: function () { return kendo.guid(); } }

Your examples in documentation do not show how to provide custom data source schema while binding to local java-script array.

How do I provide custom data source schema while binding to local java-script array and make code above working for version v2021.2.616?

 

 

[Dmitry]

This approach seemed to stop working from version Kendo UI 2020 R3 (it was working with Kendo UI 2020 R2 SP1). You can check live example here: http://dojo.telerik.com/UWuxoqaM

[Dmitry]

Hello,

Do you have any suggestions for resolving this issue?

[Veselin Tsvetanov]

Hello Dmitry,

The R3 2020 release has introduced the integration of the Kendo TreeList in the Gantt widget. That integration also brought the TreeList DataSource. As a result, when working with local data, all Tasks should have their parentId set even if that value is null:

{
 "id": "1010b897-cc7f-41be-b2d6-d464345abc05_2",
 "title": "2 Test moved site collection",
 "start": "2015-02-02T22:00:00.000Z",
 "end": "2015-02-25T22:00:00.000Z",
"parentId": null
}

Here is a modified version of the Dojo sample sent implementing the above suggestion:

http://dojo.telerik.com/UWuxoqaM/5

Regards,
Veselin Tsvetanov
Progress Telerik