Custom views can't have spaces in the title?

[Robert]

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?

[Vladimir Iliev]

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

 

 

[Robert]

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!