Questions on Kendo UI for jQuery Forum

11 answers

224 views

After the newly added task, move the error directly

Hello,

First of all, my environment is Angular10, gantt uses Kendo widgets (kendo.custom.min.js), version is 2020.3.1118
I customized a button (Add Child) on the screen. After I added a subtask,then immediately move the newly added task to the inside of another task (+ this type of movement), and then an error (e.taks = undefined), e.task cannot get the value, only in this case an error message will appear, and other moving methods will not appear.

In addition, if I add a task, F5 refreshes the page and moves the task, the above problem will not occur.

The general reason I investigated is because the id of the newly added task is assigned a value of 999. If it is not assigned, there will be no error.

This is the method of my Add Child button:

addChildTask(): void {

// select row

const currentRow = this.selectedVal;

if (currentRow) {

const gantt = kendo.jQuery(this.ganttEl.nativeElement).data("kendoGantt");

let datas = gantt.dataSource._data;

const childDatas = datas.filter(function (item) {

return item.parentId === currentRow.id;

});

let sortOrderId: number = 0;

if (childDatas.length > 0) {

sortOrderId = Math.max.apply(Math, childDatas.map(item => { return item.orderId })) + 1;

}

let addItem: any = {

// id: 999,

orderId: sortOrderId,

title: 'New Task',

parentId: currentRow.id,

start: new Date(currentRow.start),

end: new Date(currentRow.end),

percentComplete: 0,

summary: false,

expanded: true

};

// kendoui gantt use

gantt.dataSource.add(addItem);

gantt.dataSource.sync();

setTimeout(() => {

const newTask = datas.filter(function (item) {

return item.id === 0;

});

if (newTask.length > 0) {

// ID

newTask[0].id = 999;

}

gantt.refresh();

})

}

Gantt

answered on 28 Jan 2021

2 answers

105 views

kendo ui gantt filter not working

In Kendo UI version 2017.2.621 the filters work ?

Thank you

Gantt

answered on 25 Jan 2021

1 answer

84 views

Gant views

Hi,
In gantt chart, can I see Year slots in Week and Month views??

Gantt

answered on 20 Jan 2021

3 answers

332 views

Gantt chart view change

Hi,

I have an issue related to Gantt view changes. If I'm in week view, and I scroll it to some period, for example from Jun 25 to Jun 30 (see day.png), and then I change view to month, period is changed, and it goes to December (see month.png). Is there any way to fix this period after view change?

Thanks in advance.

Gantt

answered on 20 Jan 2021

1 answer

129 views

setOptions after column resize

Hi, we need to use the setOptions function when we resize the window, to set the new gantt height.

We also use the "resizable" property.

The problem is, after a "column resize", the inner "option" column width is not set to the object.

So, when we use setOptions, the columns size are back to original.

We found a workaround, where we edit the inner option column size property after a "colunnResize" event, but I think that it's a bug and it should be done by the component itself automatically.

https://dojo.telerik.com/@foxontherock/uCulUjiy/6

I also tried to keep the "listWidth" by binding the "resize" event of the inner splitbar, but I think it's not a kendo splitter, but a custom spliter made just for the gantt, and it doesn't work.

Gantt

answered on 09 Dec 2020

1 answer

69 views

currentTimeMarker false not working

Hi, we need to hide the timeMarker.

So we use the setting, "currentTimeMarker: false".

It works on the initial rendering, but it gets back on multiple events, like resize.

Example: (will reappear after 1000 ms by calling kendo.resize)

https://dojo.telerik.com/@foxontherock/iSEquBeT

Gantt

answered on 07 Dec 2020

1 answer

38 views

Gantt tasks are shifted to the right

The tasks are placed in wrong date in the chart panel.

for example: the "T2" task has start date (20/10/2020) and end date (23/10/2020) but in the chart is placed in (6/11) - (9/11).

this is the configuration I used for rendering the component:

kendo.jQuery(chartElement).kendoGantt({

views: [{type: 'week', selected: true, slotSize: 30}],

rowHeight: 10,

toolbar: ['pdf'],

listWidth: "0%",

editable: false,

selectable: true,

tooltip: {

visible: true,

template: `#= task.tooltip #`

},

range: {

start: new Date(this.model.startDate),

end: new Date(this.model.endDate)

},

showWorkDays: false,

workDayStart: this.model.startDate,

workDayEnd: this.model.endDate,

taskTemplate: `<div style="background-color: #= backgroundColor #; padding: 4px 8px; border-radius: 2px"> #= title # </div>`,

});

// this is how I added data into the chart

const dataSource = new kendo.data.GanttDataSource({

data: this.listOfScheduleTasksForGanttChart.map(task => {

const startDate = new Date(task[this.ganttChartTasksGridStartDate]);

const endDate = new Date(task[this.ganttChartTasksGridEndDate]);

return {

id: task.scheduleTaskId,

orderId: task.sortId,

parentId: task.parentId,

title: task.taskName,

start: startDate,

end: endDate,

backgroundColor: task.backColor,

expanded: true,

tooltip: task.toolTip

}

})

});

Gantt

answered on 04 Dec 2020

1 answer

211 views

Print to PDF(multiple pages)- Gantt Chart in Kendo UI for jQuery Gantt

Hi

Do have facility for print(Export to PDF) Gantt chart in to PDF with multiple pages.

One of our client want this feature.

Regards

mamachan

Gantt

answered on 04 Nov 2020

2 answers

67 views

Performance worsening in R3 release?

Hello,

after upgrading my Gantt chart to release 2020 R3 SP1 I noticed a significant performance drop in the chart to the point of it not being snappy enough to give to end users. I have made a simple repro at https://dojo.telerik.com/OjOCEjIm/4 (I hope this links to my custom edit, if not the code is down below to copy paste into a Dojo window). It is a simple Gantt chart where I add 50 summary tasks and 50 child tasks for those.

When running the chart in the dojo under 2020 R2 SP1 the chart loads fast and clicking open a summary task has an almost imperceptible delay. But when switching to 2020 R3 or R3 SP1 releases from the dropdown in the top left, the same chart takes multiple seconds to load and opening of a summary task takes about 1-2 seconds.

I'm in a situation where the data to be displayed in the Gantt sometimes is in the order of 35-50*35-50 tasks. Are there any performance hints I might employ to make the R3 release usable as I would like to use for example the columnMenu option that I believe is only available in R3? Also any and all performance hints are welcome.

If the link up doesn't link to the custom Dojo, here is the code to copypaste:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Kendo UI Snippet</title>

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/angular.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jszip.min.js"></script>

</head>

<body>

<div id="gantt"></div>

<script type="text/javascript">

var gantt;

$(function StartingPoint() {

var ganttDatasource;

this.ganttDatasource = new kendo.data.GanttDataSource();

gantt = new kendo.ui.Gantt($("#gantt"),

$.extend({

columns: [

{ field: "id", title: "ID", sortable: true, editable: false, width: 70 },

{ field: "title", title: "Title", sortable: true, editable: true, width: 100 },

{ field: "start", title: "Start", sortable: true, editable: true, format: "{0:MM/dd/yyyy HH:mm}", width: 100 },

{ field: "end", title: "End", sortable: true, editable: true, format: "{0:MM/dd/yyyy HH:mm}", width: 100 }

],

views: [

"year"

],

listWidth: 300,

height:800,

dataSource: this.ganttDatasource

}, {}));

let tasks=[];

// random tasks

for (p=1;p<50;p++) {

tasks.push({id:"p"+p,parentId:null,  title:"task", start:new Date(2020, p+1, 1),end:new Date(2020, p+2, 1), summary:true});

for (var t=0;t<50;t++) {

tasks.push({id:"p"+p+"t"+t,parentId:"p"+p, title:"task", start:new Date(2020, t+1, 1),end:new Date(2020, t+2, 1)});

}

this.ganttDatasource.data(tasks);

gantt.refresh();

});

</script>

</body>

</html>

Gantt

answered on 04 Nov 2020

2 answers

38 views

Custom view broken in 2020 R3 update?

Hello,

to me it seems the 2020 R3 update breaks a little on (some) custom views. I have a custom view adopted from your documentation at https://docs.telerik.com/kendo-ui/controls/scheduling/gantt/how-to/creating-custom-view. If I open this in the Dojo, the tasks don't line up with the table (see attached file). If I change back to 2020 R2 SP1 release from the dropdown at the top left (and cleanup the stylesheet reference), the tasks once again lineup with the table.

Also the line this.list.header.find("tr").height(height + "em"); that seems to be used to adjust the tasks <> tables gives an error of Uncaught TypeError: Cannot read property 'header' of undefined when I update to the latest release and am running the Gantt in a node.js app. Where can I do the adjusting in a custom view when I update to the latest release?

Gantt