Scheduler Custom TimelineView with overlapping events

2 posts, 0 answers
  1. Ocean Software
    Ocean Software avatar
    4 posts
    Member since:
    Aug 2013

    Posted 27 Mar 2017 Link to this post

    I'm trying to extend TimelineView so that some events overlap and others are bumped to the next line depending on their status. I can overwrite the _arrangeRows method but can't get the collidingEvents to overwrite. How do I overwrite collidingEvents from the TimelineView?

    <script type="text/javascript">

        var customTimelineView = kendo.ui.TimelineView.extend({
            options: {
                name: "customTimelineView",
                title: "Custom Time Line",
                columnWidth: 30,
            name: "customTimelineView",

            _arrangeRows: function (eventObject, slotRange, eventGroup) {
                var test = "test";
                var startIndex = slotRange.start.index;
                var endIndex = slotRange.end.index;
                var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, false);
                var rectRight = rect.right + this.options.eventMinWidth;
                //var events = kendo.ui.SchedulerView.collidingEvents(, rect.left, rectRight);
                var events = collidingEvents(, rect.left, rectRight);
                    slotIndex: startIndex,
                    start: startIndex,
                    end: endIndex,
                    rectLeft: rect.left,
                    rectRight: rectRight,
                    element: eventObject.element,
                    uid: eventObject.uid
                    start: startIndex,
                    end: endIndex,
                    uid: eventObject.uid
                var rows = kendo.ui.SchedulerView.createRows(events);
                if (eventGroup.maxRowCount < rows.length) {
                    eventGroup.maxRowCount = rows.length;
                for (var idx = 0, length = rows.length; idx < length; idx++) {
                    var rowEvents = rows[idx].events;
                    for (var j = 0, eventLength = rowEvents.length; j < eventLength; j++) {
              [rowEvents[j].uid].rowIndex = idx;


        function collidingEvents(elements, left, right) {
            var idx, startPosition, overlaps, endPosition;
            for (idx = elements.length - 1; idx >= 0; idx--) {
                startPosition = elements[idx].rectLeft;
                endPosition = elements[idx].rectRight;
                overlaps = startPosition <= left && endPosition >= left;
                if (overlaps || startPosition >= left && endPosition <= right || left <= startPosition && right >= startPosition) {
                    if (startPosition < left) {
                        left = startPosition;
                    if (endPosition > right) {
                        right = endPosition;
            return kendo.ui.SchedulerView.eventsForSlot(elements, left, right);



    Also, why are some of the functions prefixed with "_"? ie What is difference between "render()" and "_render()"?


  2. Ivan Danchev
    Ivan Danchev avatar
    2021 posts

    Posted 29 Mar 2017 Link to this post


    I am afraid assistance on extending widgets and guidance on modifying source code falls outside the scope of the Support Service. Our Professional Services team specializes in customizations not achievable through widget configuration or using the exposed API methods, according to specific client requirements. The Support Service provides guidance and explanation for built-in features of the products. Feel free to ask if you have questions on a specific built-in feature or behavior.  

    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top