Edit this page

MVC Gantt Initialized in Container Does Not Render Properly

Environment

Product Telerik UI for ASP.NET MVC Gantt

Description

My Gantt chart is placed in PanelBar item content that is not initially visible. When activating this item, the Gantt does not render properly.

Solution

The reason for this issue is that the Gantt was initialized in a hidden (display: none;) container.

  1. Use the deferred initialization of the Gantt.

    @(Html.Kendo().Gantt<InPanelBar.Models.TaskViewModel, InPanelBar.Models.DependencyViewModel>()
    .Name("Gantt")
    ...
    .Deferred()
    )
    
  2. Initialize the widget on the first activate event of the PanelBarItem that contains it.

    function onActivate(e) {
        var item = e.item;
        var title = $(item).find('a.k-header').text();
        var gantt = $('#Gantt').getKendoGantt();
    
        if (title === "Add Contenuti" && !gantt) {
            @Html.Kendo().DeferredScriptsFor("Gantt", false);
        }
    }
    

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy