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

Minimum width of columns in day/week views?

5 Answers 683 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Iron
Tom asked on 04 Oct 2017, 01:47 PM
I would like to impose a minimum width of columns in a scheduler (using MVC); by default this seems to be 101 pixels (+1 padding), but this can look very cramped, particularly when using a custom template that includes a lot of additional information. Is there a way to do this?

5 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 06 Oct 2017, 02:06 PM
Hello Tom,

The available option for setting the Scheduler's column width is by using the columnWidth configuration of the widget. Please not that the columnWidth option is supported when type of the view is set to "timeline", "timelineWeek", "timelineWorkWeek" or "timelineMonth".

Regards,
Neli
Progress Telerik
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
Tom
Top achievements
Rank 1
Iron
answered on 06 Oct 2017, 03:05 PM

Thanks for responding Neli, but unfortunately this isn't the answer I was hoping for.

My (MVC) scheduler exclusively uses the DayView, WeekView, and a custom two-week view, grouped by a resource.

Are you saying there is no built-in functionality at all that will allow a fixed column width in these views? There any way this is possible to do manually, if not through 'supported' means?

0
Neli
Telerik team
answered on 10 Oct 2017, 02:40 PM
Hello Tom,

As I mentioned in previous reply, I am afraid that the column width is not supported in all the views and there is no built-in functionality to set the width for all the views. 

If the weekView is taken as an example, the sum width of the columns for each day should be calculated by using JavaScript (ex. if the width of each column for a day needs to be 100px, the sum will be 700px;). The sum width could be set to  .k-scheduler-header and .k-scheduler-content. For the width to be applied properly you could add the following css:
.k-scheduler-header {
    box-sizing: border-box;
}

After that a calculation for the first column is needed. The width will be the total width of the widget minus sum width of the columns. the result could be applies to .k-scheduler-times.

In case you meet any difficulties do not hesitate to contact us.


Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tom
Top achievements
Rank 1
Iron
answered on 13 Oct 2017, 01:30 PM

Hi Neli, I was able to achieve this by appending the following function to the databound event of the scheduler:

function SetSchedulerWidth() {
    var minColumnWidth = 200;
    var columns = $(".k-scheduler-header .k-scheduler-table > tbody > tr:last-child > th").length;
    var availableWidth = $("#Scheduler").width() - $(".k-scheduler-layout > tbody > tr > td:first-child").width() - parseInt($(".k-scheduler-header").css("padding-right")) - 1;
    var width = Math.max(columns * minColumnWidth, availableWidth);
    $(".k-scheduler-content .k-scheduler-table").width(width);
    $(".k-scheduler-header .k-scheduler-table").width(width);
}

The css you mentioned was the missing ingredient to make this work.

Not the prettiest solution, but it does work.

0
Neli
Telerik team
answered on 17 Oct 2017, 06:48 AM
Hi Tom,

Thank you for sharing the code with us.
I am glad my suggestion helped you to solve the problem.

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular 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
Tom
Top achievements
Rank 1
Iron
Answers by
Neli
Telerik team
Tom
Top achievements
Rank 1
Iron
Share this question
or