Telerik Forums
Kendo UI for jQuery Forum
1 answer
90 views

I am new to KENDO UI Gantt Chart, using it for the first time, and facing lots of issues in adding new columns and calculations.

My client's requirement is to have a Duration column based on Planned Start Date and Planned End Date, column should be editable and when I change either PSD or PED duration should be updated, and vice versa that is if I update the duration my Planned End Date should also get updated accordingly.

Requesting help on this, I have attached the code.  

 

Neli
Telerik team
 answered on 19 Apr 2023
1 answer
89 views

Hi,

I have a question regarding Gantt chart performance, when having large amount of data. I expect that my Gantt chart will have ~10.000 rows minimum, but I am starting to face some performance issues  with this amount of data.  The widget becomes laggy and responses to user actions with a delay.

So my question is what is the maximum row count that Gantt supports?  Maybe I've reached it? 

Thank you)

Neli
Telerik team
 answered on 24 Nov 2022
2 answers
119 views

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?

 

 

Veselin Tsvetanov
Telerik team
 answered on 30 Dec 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?