Year view?

8 posts, 0 answers
  1. Randy
    Randy avatar
    5 posts
    Member since:
    Jun 2012

    Posted 10 Sep 2014 Link to this post

    So the gantt chart has Day, Week, and Month views.... but are there any plans to include a Year view? I'd like to have a Year view with Months as the sub-divider.

    Thanks!
  2. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 11 Sep 2014 Link to this post

    Hi,

    I've logged the proposal in our User voice, and you can vote for it here:
    http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/6422345-implement-year-view-for-kendo-ui-gantt

    Currently we don't have plans to include the Year view, but if the issue gets enough votes we will schedule it for one of our upcoming releases.

    Regards,
    Bozhidar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Chris
    Chris avatar
    7 posts
    Member since:
    Jan 2016

    Posted 03 Feb Link to this post

    Can a custom view be created by users? If so how
  5. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 03 Feb Link to this post

    Hi,

    A custom view can be created by users, and the following article explains how you can do that:
    http://docs.telerik.com/KENDO-UI/controls/scheduling/gantt/how-to/creating-custom-view

    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
  6. Chris
    Chris avatar
    7 posts
    Member since:
    Jan 2016

    Posted 03 Feb in reply to Bozhidar Link to this post

    The link provided displays sample code that is non functional.  Also it is for creating a custom view in javascript,  not a sample for creating a custom view in MVC?
  7. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 03 Feb Link to this post

    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
  8. Chris
    Chris avatar
    7 posts
    Member since:
    Jan 2016

    Posted 03 Feb in reply to Bozhidar Link to this post

    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>
     
     
     
        <script src="http://code.jquery.com/jquery-1.9.1.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>

  9. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 04 Feb Link to this post

    Hello,

    Here's a dojo sample with two custom views, one with Years and Quarters, and the other with Qarters and Months:
    http://dojo.telerik.com/iSAJa/2

    The sample also includes the built-in YearView, that's been recently added in the gantt widget.

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready