Telerik gantt未使用Bootstrap选项卡正确显示

Question

我使用的是Telerik Gantt图表来显示Bootstrap Tab接口中包含的条目时间表。我有一个宽度/尺寸问题。

加载页面后，甘特图宽度不正确，但是如果我调整窗口大小，则它会自行纠正。

这是页面首次加载时甘特（Gantt）出现的方式：

调整了页面大小后，它将自己的修复方式固定：

https://i.sstatic.net/vmiy3.png“ alt =“在此处输入图像说明”>

这是我当前的代码：

 <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#steps" aria-controls="home" role="tab" data-toggle="tab">Steps</a></li>
    <li role="presentation"><a href="#schedule" aria-controls="profile" role="tab" data-toggle="tab">Schedule</a></li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="steps">
    *other content*
    </div>
    <div role=tabpanel" class="tab-pane" id="schedule">
       @(Html.Kendo()
                                .Gantt<RequestStepGanttViewModel, DependencyViewModel>((IEnumerable<RequestStepGanttViewModel>)ViewData["tasks"])
                                .Name("gantt")
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.TaskID).Title("ID").Width(50);
                                    columns.Bound("title").Editable(true).Sortable(true);
                                    columns.Bound("start").Title("Start Time").Format("{0:MM/dd/yyyy}").Width(100).Editable(true).Sortable(true);
                                    columns.Bound("end").Title("End Time").Format("{0:MM/dd/yyyy}").Width(100).Editable(true).Sortable(true);
                                })
                                .Views(views =>
                                {
                                    views.DayView();
                                    views.WeekView(weekView => weekView.Selected(true));
                                    views.MonthView();
                                })
                                .Editable(ed => ed.Destroy(false))
                                .Height(500)
                                .ShowPlannedTasks(false)
                                .ShowWorkHours(false)
                                .ShowWorkDays(false)
                                .DataSource(d => d
                                    .Model(m =>
                                    {
                                        m.Id(f => f.TaskID);
                                        m.ParentId(f => f.ParentID);
                                        m.OrderId(f => f.OrderId);
                                        m.Field(f => f.Expanded).DefaultValue(true);
                                    })
                                        .Destroy("Destroy_Task", "Orders")
                                        .Update(update => update.Action("Update_Task", "Orders").Data("onUpdateCreate"))
                                        .Create(create => create.Action("Create_Task", "Orders").Data("onUpdateCreate"))
                                )
                        )
    </div>
</div>

非常感谢任何帮助。

Answer 1

经过一番测试，我发现了最佳解决方案：

我在标签条中添加了一个onclick事件，该事件调用下面的函数，下面的功能等待1秒，然后刷新/调整gantt图表。

<script>
    function resizeGantt(){
        var delay = 1000;

        setTimeout(function () {
            var gantt = $("#gantt").data("kendoGantt");
            gantt.resize();
            gantt.refresh();
        }, delay);
       
    }       
</script>