Today Hour Lines Not Showing Up in Scheduler Inside TabStrip

5 posts, 0 answers
  1. Matthew
    Matthew avatar
    10 posts
    Member since:
    Nov 2014

    Posted 22 Dec 2014 Link to this post

    Hello,

    I have a scheduler instantiated inside a bootstrap column, nested inside a kendo tabstrip container. Everything looks good, except that only today's view does not show any lines for the day. Also, when I switch to the week view, every day but today is showing up with the correct tr borders. 

    I tried using the refresh code, including adding a delay to refresh after the tab is activated; but no luck. Here is my code:

    var loadAppointments = function()
    {
       $("#schedule-appointments-scheduler").kendoScheduler();
    }
     
    var loadContent = function()
    {
       var vm = ViewModelManager.getViewModel();
       loadAppointments();
       $("#schedule-main-content-container").kendoTabStrip({
     animation:  {
     open: {
      effects: "fadeIn"
     }
    },
    activate: function(e)
    {
        var scheduler = $("#schedule-appointments-scheduler").data("kendoScheduler");
           _.delay(function() {
              //scheduler.view(scheduler.view().name);
              scheduler.refresh();
           }, 200);   
    }
    });
    }

    The first Screenshot is today's date, and the second is tomorrow. Any help would be greatly appreciated. 

    Regards,
    Matt
  2. Matthew
    Matthew avatar
    10 posts
    Member since:
    Nov 2014

    Posted 22 Dec 2014 in reply to Matthew Link to this post

    Well, I feel like an idiot! I went to the demo on the Kendo Demos page and it is showing the same behavior. Are we saying that for today, no hour lines show up? I'm using the latest Safari, Chrome and Firefox and getting the same results. Is there a way to change this behavior?

    Thanks,
    Matt
  3. Matthew
    Matthew avatar
    10 posts
    Member since:
    Nov 2014

    Posted 22 Dec 2014 in reply to Matthew Link to this post

    So, I changed the styling of: #schedule-main-content-container table tr.k-middle-row td.k-today, with a border-bottom and top (still working on the styling. However, now that I have a border on it to see the boundaries, I have noticed that as the day progresses, the table rows are shifting down about 2 pixels per hour (guess). Any suggestions on where to change the style of this?

    Thanks again,
    Matt 
  4. Dimo
    Admin
    Dimo avatar
    8451 posts

    Posted 23 Dec 2014 Link to this post

    Hello Matt,

    The problem is caused by the fact that the cells' border color matches the background color. This can be easily resolved with the CSS rule below and I will consult our designers to suggest a change in the Kendo UI Bootstrap theme for future releases.

    .k-scheduler-times tr,
    .k-scheduler-times th,
    .k-scheduler-table td,
    .k-scheduler-header th,
    .k-scheduler-header-wrap,
    .k-scheduler-times
    {
       border-color: #ccc;
    }

    A misalignment will occur if you add more borders than are normally used, which will break the alignment between the different tables inside the Scheduler. That's why you should only change colors of exissting borders, as shown above.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Matthew
    Matthew avatar
    10 posts
    Member since:
    Nov 2014

    Posted 23 Dec 2014 in reply to Dimo Link to this post

    Thanks Dimo,

    Got it figured out. I immediately went into troubleshooting a programatic error initially. Never thought it was meant to do that! With some simple CSS hacks, I got it up and running.

    Thanks for your quick response!

    -- Matt
Back to Top