Responsive Column Width in Timeline View?

[Carter]

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?

[Aleksandar]

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.

Regards,
Aleksandar
Progress Telerik