[Solved] Scheduler - Group by Resource - (Angular) resource label template

[Matt]

What I'm trying to replicate is the bit on the left of their schedule in http://wheniwork.com/

...  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:

• http://dojo.telerik.com/eqUl/103 - except the binding are kendo  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 = k.date,
        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 = `
                    <div>{0}</div>
                    <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
                configuration.push(obj);
               //configuration.push(element);
            }
            return configuration;
        }
        return inner;
    }


    let options: any = {
        nextDate: function () {
            return kDate.nextDay(this.startDate());
        },
        calculateDateRange: function () {
            var selectedDate = this.options.date,
                start = selectedDate,
                end = kDate,
                dates = [];

            for (let index = 0, length = 7; index < length; index++)
            {
                dates.push(start);
                start = kDate.nextDay(start);
            }

            this._render(dates);
        },
        _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 $ events as well? 

 

Best Regards,

Matt 

[Matt]

I hadn't noticed the 'groupHeaderTemplate' in the scheduler options. Setting this template also doesn't seem to support angular templates? 

[Georgi Krustev]

Hello Matt,

I would suggest you check our how-to demos that demonstrate different ways to extend the built-in views:

• http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-view
• http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/timeline-with-dynamic-length
  

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:

• http://dojo.telerik.com/UfUME

Regards,
Georgi Krustev
Telerik

 

 

[Matt]

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.