Scheduler - Group by Resource - (Angular) resource label template

4 posts, 0 answers
  1. Matthew
    Matthew avatar
    43 posts
    Member since:
    May 2013

    Posted 07 Mar Link to this post

    What I'm trying to replicate is the bit on the left of their schedule in

    ... well the profile pic and name part with an angular directive. 


    I'm extending the timeline view and overriding _createColumnsLayout and _createRowsLayout. 

    This is a very close (older) dojo example of how I'm doing this:

    • - except the binding are kendo vm rather than angular. If I can get the angular binding to work I can pretty much continue on my way. 

    Here is my typescript file... the typings in kendo.all are incomplete ... so I've had to cast to 'any' quite a bit ... and well guess. More in the typescript files would be lovely ;-) 


    module Hr.KendoThings {
        var extend = $.extend,
            k: any = kendo,
            ui: any = kendo.ui,
            kDate: any =,
            SchedulerTimelineView = ui.TimelineView;
    //NS = ".kendoTimelineWeekView";
        function customCreateLayoutConfiguration(name, resources, inner, something) {
            var resource = resources[0];
            if (resource) {
                var configuration = [];
                var data = resource.dataSource.view();
                for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
                    var defaultText = kendo.htmlEncode(k.getter(resource.dataTextField)(data[dataIndex]));
                    var dataItem = data[dataIndex];
        var templateText = `
                        <employee-pic id=\"'{0}'\"></employee-pic>`;
                    templateText = kendo.format(templateText, dataItem.Id);
                    var template = kendo.template("<a href='javascript: void(0)'>#=data.Email#</a>");
                    var template2 = kendo.template("<a href='javascript: void(0)'>{{dataItem.Email}}</a>");
                    var obj = {
                        text: template2(dataItem),// t(dataItem),
                        className: "k-slot-cell"
                    var element = $(template2(data));
                    var scope = something.$angular_scope; //scope from _createColumnsLayout
                    //this.angular is not defined :(
                    //this.angular('compile', function () {
                    //    return {
                    //        elements: element,
                    //        data: [{ dataItem: data }]
                    //    };
                    //obj[name] = customCreateLayoutConfiguration(name, resources.slice(1), inner);
                    //text version
                return configuration;
            return inner;
        let options: any = {
            nextDate: function () {
                return kDate.nextDay(this.startDate());
            calculateDateRange: function () {
                var selectedDate =,
                    start = selectedDate,
                    end = kDate,
                    dates = [];
                for (let index = 0, length = 7; index < length; index++)
                    start = kDate.nextDay(start);
            _createColumnsLayout: function (resources, inner) {
                var that = this;
                return customCreateLayoutConfiguration("columns", resources, inner, that);
            _createRowsLayout: function (resources, inner) {
                var that = this;
                return customCreateLayoutConfiguration("rows", resources, inner, that);
        var SchedulerTimelineWeekView = SchedulerTimelineView.extend(options);
        MyAndromeda.Logger.Notify("Defining SchedulerTimelineWeekView");
        extend(true, ui, {
            SchedulerTimelineWeekView: SchedulerTimelineWeekView


    What would the easiest way of doing this? 

    I presume I will need to tie in the $dispose events as well? 


    Best Regards,


  2. Matthew
    Matthew avatar
    43 posts
    Member since:
    May 2013

    Posted 07 Mar in reply to Matthew Link to this post

    I hadn't noticed the 'groupHeaderTemplate' in the scheduler options. Setting this template also doesn't seem to support angular templates? 
  3. Georgi Krustev
    Georgi Krustev avatar
    3687 posts

    Posted 10 Mar Link to this post

    Hello Matt,

    I would suggest you check our how-to demos that demonstrate different ways to extend the built-in views:
    If you would like to modify particular part of the built-in views, then most probably you will need to re-implement the view using a custom code. Please note that custom implementations fall out of the scope of the standard support service. If you need an assistance with the concrete custom implementation please contact our Professional Services. They are specialized in such tasks and will gladly assist you.

    As to the second question, indeed groupHeaderTemplate is not evaludated with the resource data item using AngularJS approach. For now you will need to use the "<script>" template approach:
    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Matthew
    Matthew avatar
    43 posts
    Member since:
    May 2013

    Posted 10 Mar in reply to Georgi Krustev Link to this post

    Thanks Georgi 

    I have experimented with both the timeline and month views and in the end and I have a fairly nice custom view going. I ended switching to the month view in the end and held it back to just showing a week in advance.

    As for making the resource template usable with AngularJS ... I'll dig around the code some more that can initialize it. 


Back to Top