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

2 Answers 36 Views
Data Source Gantt
Dmitry
Top achievements
Rank 1
Iron
Dmitry asked on 27 Dec 2021, 11:12 AM

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
Top achievements
Rank 1
Iron
commented on 27 Dec 2021, 01:27 PM

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

2 Answers, 1 is accepted

Sort by
0
Dmitry
Top achievements
Rank 1
Iron
answered on 29 Dec 2021, 08:11 AM

Hello,

Do you have any suggestions for resolving this issue?

0
Veselin Tsvetanov
Telerik team
answered on 30 Dec 2021, 09:29 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Data Source Gantt
Asked by
Dmitry
Top achievements
Rank 1
Iron
Answers by
Dmitry
Top achievements
Rank 1
Iron
Veselin Tsvetanov
Telerik team
Share this question
or