在调度程序上更改列宽

Question

我正在尝试做一些看起来应该相对容易做的事情，尽管我找不到任何关于如何做的资源。

我有一个呈现为 DayView 的 Kendo Scheduler 控件。我只是想改变列的宽度。这是屏幕截图：

这是我的 MVC 视图代码：

<div>
    @(Html.Kendo().Scheduler<TechScheduler.Infrastructure.ViewModels.ScheduleEventModel>()
    .Name("scheduler")
    .Editable(true)
    .Date(DateTime.Now)
    .StartTime(new DateTime(DateTime.Now.AddYears(-1).Year, DateTime.Now.AddYears(-1).Month, DateTime.Now.AddYears(-1).Day, 0, 0, 0))
    .EndTime(new DateTime(DateTime.Now.AddYears(1).Year, DateTime.Now.AddYears(1).Month, DateTime.Now.AddYears(1).Day, 23, 59, 59))
    .WorkDayStart(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0))
    .WorkDayEnd(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 23, 59, 0))
    .WorkWeekStart(0)
    .WorkWeekEnd(7)
    .MajorTick(60)
    .Height(600)                
    .Timezone("Etc/UTC")
    .Events(e =>
    {
        e.ResizeEnd("scheduler_resizeEnd");
        e.DataBound("scheduler_dataBound");
        e.Edit("scheduler_edit");
    })
    .Views(views =>
    {
        views.DayView(z =>
        {
            z.StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0));
            //z.EndTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 23, 59, 59));
            z.MajorTick(60);
            z.ShowWorkHours(false);
            z.Footer(false);
            z.EventTemplateId("evenTemplate");
        });            
    })
    .Group(group => group.Resources("Attendees").Orientation(SchedulerGroupOrientation.Horizontal))
    .Resources(resource =>
    {
        resource.Add(m => m.Attendees)
            .Title("Attendees")
            .Name("Attendees")
            .Multiple(true)
            .DataTextField("TechnicianName")
            .DataValueField("TechnicianId")
            .DataColorField("Color")
            .DataSource(ds => ds.Read("GetTechnicians", "Ajax"));
    })
    .DataSource(d => d.Model(m =>
            {
                m.Id(f => f.MeetingID);
                m.RecurrenceId(f => f.RecurrenceID);
                m.Field(f => f.Title).DefaultValue("No title");
            })
            .Read("GetSchedule", "Ajax")
    )
    )
</div>

有一个 ColumnWidth 属性，但它在属性正下方的注释中说它仅在 TimeLine 视图中受支持。

如何缩小列宽？

Answer 1

我想通了。如果其他人遇到此问题，我使用此 CSS 代码更改大小：

.k-scheduler-content .k-scheduler-table,
.k-scheduler-header .k-scheduler-table {
    width: @(TechScheduler.Infrastructure.Technicians.GetNumberOfTechnicians() * 100)px;
}

我有一个名为 GetNumberOfTechnicians() 的方法，它基本上 returns 我的调度程序中的列数，然后我将其乘以我希望每列的像素数 (100px) .到目前为止，它似乎适用于我所有的测试！

在调度程序上更改列宽

Changing column widths on a scheduler

c#

asp.net-mvc

column-width

kendo-ui

kendo-scheduler