I am using a Telerik Gantt chart to show a schedule of entries, contained in a bootstrap tab interface. I have a width/size issue.

When page is loaded, the Gantt chart width is not correct, but if I resize the window it corrects itself.

Here is how the Gantt appears when the page first loads:

After resizing the page, it fixes itself like so:

Here is my current code:

 <ul  role="tablist">
    <li role="presentation" ><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 >
    <div role="tabpanel"  id="steps">
    *other content*
    </div>
    <div role=tabpanel"  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>

Any help is much appreciated.

CodePudding user response：

After some testing I found this solution the best:

I added an onclick event to the tab strip that calls the function below, and the function below waits 1 sec before refreshing/resizing the Gantt chart.

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

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