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

Gathering events into single rows

5 Answers 187 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Tore
Top achievements
Rank 1
Tore asked on 14 Mar 2017, 04:52 PM

Hello,

I have tried out the Gantt control and moving over to the Scheduler control - I find that the presentation is almost the way I want. However, I want to force events to stick on one row. I display scheduled tasks for multiple employees and want to have both transparency and force tasks / events on a single row and not the way it is displayed in the attached image. Here, overlapping tasks/events will be shown on multiple rows. The grouping works nice, I want to utilize vertical space better by forcing multiple tasks /events into a single row to avoid lenghty scrolling. 

Is this possible with Scheduler control? I used Kendo UI for MVC. 

5 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 16 Mar 2017, 11:17 AM
Hello Tore,

As far as I can understand, you need to display events (tasks), that are simultaneous on the same line, so you could save some vertical space. For example, on the image sent, the Poliklinik event for Geir should be displayed not below, but next to D DO event on the same day.

If this is your requirement, I am afraid, that the Scheduler widget could not be configured to display events is such manner. The reason for that is the fact that it distributes events over the time-slots, they are placed in. As a consequence, if two simultaneous events are displayed on the same line, they will overlap.

Regards,
Veselin Tsvetanov
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.
0
Tore
Top achievements
Rank 1
answered on 16 Mar 2017, 11:25 AM

Yes, my business requirement is to display overlapping events. I was thinking of using transparent display of overlapping events with CSS styling and adjusting the events, preferably with functionality in the control, but if this is not possible - using Javascript instead.

If it still is possible to do this or plan to include such functionality in the future for Scheduler control of Telerik Kendo UI for MVC, please let me know. 

Regards, 
Tore 

 

0
Veselin Tsvetanov
Telerik team
answered on 17 Mar 2017, 06:21 AM
Hello Tore,

Thank you for the further clarifications provided.

At the current moment, we do not plan to introduce functionality for the Scheduler, that would allow displaying overlapping events. What I could suggest you is to log your idea in our Feedback portal. Based on the support it receives from the community, we will decide on its possible future implementation.

Nevertheless, the required could be achieved by implementing a custom view for the Scheduler widget. Here you could find an example on how such could be implemented.

Regards,
Veselin Tsvetanov
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.
0
Tore
Top achievements
Rank 1
answered on 18 Mar 2017, 02:46 PM

Hello again, I have actually managed to get the events on the same row using jQuery in the onDataBound clientside event. 
The attached image shows how I now can show overlapping events. (The data is from our test environment and contains fictional data) 

However, the rows themselves are unecessary tall. Where there has been overlapping events that I now have adjusted these events to overlap and show in a single row, I want to "shrink" the rows to fit to content. The EventHeight property has been set to 20 px to compact the display, but still I want to have a fix height of the rows, say 30px or 40 px. I have tried both css and using the  .css method of jQuery, but still no sigar. 

Here is the javascript I use in the onDataBound client-side event to get the events on one row, looks to work nice in different browsers and different views, such as weekly timeline and daily timeline. I group the data by a field called PrsPersonId and I keep setting the top css-value to the first event I find per employee. The goal is a compact display of 50-100 employees in organization units: 

function onDataBound(e){

      var dataItems = $("#scheduler").data("kendoScheduler").data();
       
        if (dataItems != null || dataItems !== undefined) {
            var currentPrsPersonId = 0;
            var currentStyleTopHeight = "0px";
            for (i = 0; i < dataItems.length; i++) {
                var dataItem = dataItems[i];
                if (dataItem != null) {
                    if (currentPrsPersonId !== dataItem.PrsPersonId) {
                        currentPrsPersonId = dataItem.PrsPersonId;
                        currentStyleTopHeight = $("#scheduler").find("div[data-uid='" + dataItem.uid + "']").css("top");
                    }
                    else {
                       $("#scheduler").find("div[data-uid='" + dataItem.uid + "']").css("top", currentStyleTopHeight);
                    }
                }
            }
        }

}

 

Is it an easy way to force the row height to be 30-40 px tall?

0
Accepted
Veselin Tsvetanov
Telerik team
answered on 21 Mar 2017, 03:10 PM
Hi Tore,

You could set the Scheduler timeline row height by using the following CSS rule:
.k-scheduler-table>tbody>tr {
  height: 79px !important;
}

Keep in mind, however, that altering manually the position of the events on the Scheduler table may lead to improper selection and editing of the events. Therefore, the recommended approach is to implement a Custom view, that would hold all the configuration needed for your specific case.

Regards,
Veselin Tsvetanov
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.
Tags
Scheduler
Asked by
Tore
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Tore
Top achievements
Rank 1
Share this question
or