This is a migrated thread and some comments may be shown as answers.

Year view?

7 Answers 311 Views

Gantt

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 03 Feb 2016, 07:49 AM

Hi,

If you click on the "Open in Dojo" button at the top of the example, you will be redirected to our online dojo with the sample loaded. The dojo sample seems to be working fine when I open it. Could you clarify what issues are you experiencing with it?

Due to the nature of the view implementation, you can only create a custom view in javascript. We will try to include the option to reference the custom javascript view from MVC in the future releases of the gantt, however at the moment we cannot say with certainty when this might be available.

Regards,
Bozhidar
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 03 Feb 2016, 08:09 AM

It is working in DOJO so it must be an issue on my end. that is a shame that it doesn't work with MVC, I was under the impression that Telerik sold complete MVC wrappers for the KendoUI.

How do you add two custom views? I changed the dojo example, and I can only get it to show the yearly custom view?

Here is the sample code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Kendo UI Snippet</title>

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

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

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

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

</head>

<body>

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

<script type="text/javascript">

var gantt;

$(function StartingPoint() {

kendo.ui.GanttCustomView = kendo.ui.GanttView.extend({

name: "quarterlyCustom",

options: {

yearHeaderTemplate: kendo.template("#=kendo.toString(start, 'yyyy')#"),

quarterHeaderTemplate: kendo.template("# return ['Q1', 'Q2', 'Q3', 'Q4'][start.getMonth() / 3] #")

},

range: function(range) {

this.start = new Date("01/01/2013");

this.end = new Date("01/01/2016");

},

_generateSlots: function(incrementCallback, span) {

var slots = [];

var slotStart = new Date(this.start);

var slotEnd;

while (slotStart < this.end) {

slotEnd = new Date(slotStart);

incrementCallback(slotEnd);

slots.push({ start: slotStart, end: slotEnd, span: span });

slotStart = slotEnd;

}

return slots;

},

_createSlots: function() {

var slots = [];

slots.push(this._generateSlots(function(date) { date.setFullYear(date.getFullYear() + 1); }, 12));

slots.push(this._generateSlots(function(date) { date.setMonth(date.getMonth() + 3); }, 3));

return slots;

},

_layout: function() {

var rows = [];

var options = this.options;

rows.push(this._slotHeaders(this._slots[0], kendo.template(options.yearHeaderTemplate)));

rows.push(this._slotHeaders(this._slots[1], kendo.template(options.quarterHeaderTemplate)));

return rows;

}

});

kendo.ui.GanttCustomView = kendo.ui.GanttView.extend({

name: "yearlyCustom",

options: {

yearHeaderTemplate: kendo.template("#=kendo.toString(start, 'yyyy')#")

},

range: function(range) {

this.start = new Date("01/01/2013");

this.end = new Date("01/01/2016");

},

_generateSlots: function(incrementCallback, span) {

var slots = [];

var slotStart = new Date(this.start);

var slotEnd;

while (slotStart < this.end) {

slotEnd = new Date(slotStart);

incrementCallback(slotEnd);

slots.push({ start: slotStart, end: slotEnd, span: span });

slotStart = slotEnd;

}

return slots;

},

_createSlots: function() {

var slots = [];

slots.push(this._generateSlots(function(date) { date.setFullYear(date.getFullYear() + 1); }, 12));

return slots;

},

_layout: function() {

var rows = [];

var options = this.options;

rows.push(this._slotHeaders(this._slots[0], kendo.template(options.yearHeaderTemplate)));

return rows;

}

});

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

$.extend({

columns: [

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

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

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

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

],

views: [

"week",

{ type: "kendo.ui.GanttCustomView", title: "Quaterly", selected: false, name: "quarterlyCustom" },

{ type: "kendo.ui.GanttCustomView", title: "Yearly", selected: true, name: "yearlyCustom" }

],

listWidth: 500,

dataBound: function() {

var height = this.timeline.view()._slots.length * 2.5;

this.list.header.find("tr").height(height + "em");

this.list._adjustHeight();

},

dataSource: {

data: [{ id: 1, parentId: null, percentComplete: 0.2, orderId: 0, title: "foo", start: new Date("05/05/2014 09:00"), end: new Date("06/06/2014 10:00") },

{ id: 2, parentId: null, percentComplete: 0.4, orderId: 1, title: "bar", start: new Date("07/06/2014 12:00"), end: new Date("08/07/2014 13:00") }]

},

dependencies: {

data: [

{ id: 1, predecessorId: 1, successorId: 2, type: 1 }

]

}

}, {})

);

});

</script>

</body>

</html>