Minimum width of columns in day/week views?

6 posts, 0 answers
  1. Tom
    Tom avatar
    18 posts
    Member since:
    Apr 2016

    Posted 04 Oct Link to this post

    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?
  2. Neli
    Admin
    Neli avatar
    28 posts

    Posted 06 Oct Link to this post

    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.
  3. Tom
    Tom avatar
    18 posts
    Member since:
    Apr 2016

    Posted 06 Oct in reply to Neli Link to this post

    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?

  4. Neli
    Admin
    Neli avatar
    28 posts

    Posted 10 Oct Link to this post

    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.
  5. Tom
    Tom avatar
    18 posts
    Member since:
    Apr 2016

    Posted 13 Oct in reply to Neli Link to this post

    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.

  6. Neli
    Admin
    Neli avatar
    28 posts

    Posted 4 days and 16 hours ago Link to this post

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