Gathering events into single rows

6 posts, 0 answers
  1. Tore
    Tore avatar
    13 posts
    Member since:
    Dec 2012

    Posted 14 Mar Link to this post

    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. 

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    516 posts

    Posted 16 Mar Link to this post

    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.
  3. Tore
    Tore avatar
    13 posts
    Member since:
    Dec 2012

    Posted 16 Mar in reply to Veselin Tsvetanov Link to this post

    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 

     

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    516 posts

    Posted 17 Mar Link to this post

    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.
  5. Tore
    Tore avatar
    13 posts
    Member since:
    Dec 2012

    Posted 18 Mar Link to this post

    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?

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    516 posts

    Posted 21 Mar Link to this post

    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.
Back to Top