Responsive Column Width in Timeline View?

2 posts, 0 answers
  1. Carter
    Carter avatar
    4 posts
    Member since:
    Nov 2019

    Posted 19 Feb 2020 Link to this post

    I have a scheduler in timeline view built in Kendo for jQuery. The rest of the site is in ASP.NET MVC. I'm wondering if there's any way to dynamically/responsively set the column width so that on most desktop screens, the whole day is visible without scrolling. I have columnWidth:70 set in the views option, but this is too small on large screens, but 80 is too big on small screens. Any way to tell Kendo to scale the column widths based on window size?
  2. Aleksandar
    Aleksandar avatar
    280 posts

    Posted 21 Feb 2020 Link to this post

    Hello Carter,

    Changing the width of the slot for the Scheduler dynamically would require overriding some of the default logic of the widget as a lot of the functionality of the widget depends on the slot size, including the rendering of the events, support for dragging and dropping of events, etc. That said changing the styling via CSS and media queries would not suit the scenario.

    What I could suggest is to review the Adaptive rendering functionality, in case this approach would suit your application.

    An alternative approach would be to check for the window size before widget initialization and based on it to initialize the widget with a particular columnWidth configuration. You could use the window.matchMedia() function. This approach is demonstrated in this dojo. If the screen width is less than 600 px the widget will be initialized with columnWidth:30. For screens with width greater than  600px the columnWidth would be set to 100px.:

    var mq = window.matchMedia( "(max-width: 600px)" ); 
    if (mq.matches) {
       //initialize widget
       else {
        //initialize widget          

    I hope the above helps implement the desired functionality in the application. Let me know if you have additional questions.

    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top