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

Custom views can't have spaces in the title?

2 Answers 23 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 24 Aug 2015, 02:50 PM

Hi!

I've inherited my own custom timeline view to display two weeks. I must set the title attibute when I add it to the views array or it won't display. The problem is that KendoUI seems to use the title to render css class names which prevents the button for the selected view from highlighting.

JavaScript:

var TimelineViewTwoWeeks = kendo.ui.TimelineView.extend({
    options: {
        name: "TimelineViewTwoWeeks",
        title: "Timeline2Weeks",
        selectedDateFormat: "{0:D} - {1:D}",
        selectedShortDateFormat: "{0:d} - {1:d}",
        majorTick: 720
    },
    name: "timelineviewtwoweeks",
    calculateDateRange: function() {
        var selectedDate = this.options.date;
        var start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1);
        var dates = [];
        var idx;
        for (idx = 0; idx < 14; idx++) {
            dates.push(start);
            start = kendo.date.nextDay(start);
        }
        this._render(dates);
    }
});
 
...
$('#mainCalendar').kendoScheduler({
    showWorkHours: true,
    views: [
        "timelineWorkWeek",
        "timelineWeek",
        {
            type: TimelineViewTwoWeeks,
            title: "Two Weeks",
            name: "timeline2weeks",
            dateHeaderTemplate: kendo.template("#=kendo.toString(date, 'dddd')#<br/>#=kendo.toString(date, 'm')#")
        },
        "agenda" 
    ]
});

This renders the view button as:

<li class="k-state-default k-view-two weeks" data-name="Two Weeks">
  <a class="k-link" role="button" href="#">Two Weeks</a>
</li>

 Notice the space in class name: "k-view-two weeks"

Shouldn't the class name be derived from the "name"-property instead of the "title"-property?

2 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 26 Aug 2015, 08:59 AM
Hi Robert,

To achieve the desired behavior the type of the view should be specified as "string" - please check the updated demo below:

var TimelineViewTwoWeeks = kendo.ui.TimelineView.extend({
  options: {
    name: "TimelineViewTwoWeeks",
    title: "Timeline2Weeks",
    selectedDateFormat: "{0:D} - {1:D}",
    selectedShortDateFormat: "{0:d} - {1:d}",
    majorTick: 720
  },
  name: "timelineviewtwoweeks",
  calculateDateRange: function() {
    var selectedDate = this.options.date;
    var start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1);
    var dates = [];
    var idx;
    for (idx = 0; idx < 14; idx++) {
      dates.push(start);
      start = kendo.date.nextDay(start);
    }
    this._render(dates);
  }
});
 
$.extend(true, kendo.ui, {
  TimelineViewTwoWeeks: TimelineViewTwoWeeks
});

$("#scheduler").kendoScheduler({
  views: [
    "day",
    { type: "kendo.ui.TimelineViewTwoWeeks", title: "T T T"},
  ],

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Robert
Top achievements
Rank 1
answered on 31 Aug 2015, 02:07 PM

That worked great! Thanks!

I think there's an example somewhere on your web site that has the same problem. I'd ask you to update it but I can't find it anymore.

Anyway, thanks for the help!

Tags
Scheduler
Asked by
Robert
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Robert
Top achievements
Rank 1
Share this question
or