gantt is empty first time

[n/a]

Hi,

Gantt control is showing empty first time when page is loading. Whenever I refresh or reload the page then it is showing data. Please help me.

 

Regards,

Ram.

[n/a]

Are you there? It's been two days..Please reply..Gantt chart is not rendering first time. After click on F12 or refresh the page then it is rendering.

[Neli]

Hello Ramana,

I have tested locally, but I did not manage to reproduce the described behavior. 
Attached you will find a sample project. Gantt is loaded correctly initially. Note, that dependencies are deleted due to the size limits.
May I ask you to modify the attached sample project in order to replicate the observed issue and send it back to us? This way we could troubleshoot the problem locally and advise you further.

Regards,
Neli
Progress Telerik

[n/a]

Hi Neli,

It is rendering normally when you load telerik control  directly. But when you load telerik control(not only Gantt,even spreadsheet) in popup or tab click, it is not rendering first time. If you refresh that page or click F12 then it is rendering normally.

I have updated Index.cshtml(in Home) with one input button. When you click on this button one pop up will open which contains gantt chart. 

Need I reload that control in button click? Help me asap. Please find the updated Index.cshtml.

Thanks,

Ramana M

[Neli]

Hi Ramana,

When Gantt is initialized in a hidden container, you will need to use the deferred initialization. Please refer to the following Knowledge base article, where you will find such example.  
In the provided Index file I have added the Deferred method to the Gantt initialization.

@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>()
            .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");
                columns.Bound("end").Title("End Time");
            })
           ..
            .Deferred()
            ..

        )

The deferred scripts should be called, when the modal popup is opened:

$("#divtemplate").on('shown.bs.modal', function () {
        var gantt = $('#gantt').getKendoGantt();
        if (!gantt) {
            @Html.Kendo().DeferredScriptsFor("gantt", false);
        }
});

Attached you will find the modified index file. 

Regards,
Neli
Progress Telerik

[n/a]

Thank you so much Neli, Its working in popup. But when you place same Gantt control in tabs. It is not rendering properly. I have updated index.cshtml with tabs and I've placed Gantt control in tasks tab which is not rendering properly first time. Help me asap. And I have few more doubts about Gantt.

1) How can I give image button to Assign Resources in gantt control?

2) Can we have tooltip option for Gantt control row headers??

Please find the attachment of Index.cshtml

[Neli]

Hi Ramana,

I have replied in the other thread regarding the same issue. For convenience you will find my reply copied here as well

*Gantt not rendering in tabs
I used the provided files to test the behavior. When each tab of tab container is clicked, there is animation, so the elements might not be rendered yet. For this reason I have added to the implementation a setTimeout function.

$('#tasksTab').click(function () {
       setTimeout(function () {
           var gantt2 = $('#gantt2').getKendoGantt();
           if (!gantt2) {
               @Html.Kendo().DeferredScriptsFor("gantt2", false);
           }
       },1000)
   })

You will find the Gantt in the tab-container in the About page. Note, that there could not be two widgets with the same name, so the name of the second Gantt is 'gantt2'. I would also suggest you to take a look of the Kendo TabStrip in case you need to have a Tabstrip in your project. 


* image button to Assign Resource 
Could you please elaborate a little bit more on the desired result? In case you need to add an image next to the 'Assigned Resources' header, you could use the jQuery append method. For example:

$('[data-field="resources"]').append('<button onclick="btnClick()" class="k-icon k-i-delete"></button>')

Here is a Dojo example where there is a button in the resources header. On click on the button an alert appears.


* Tooltip for Gantt row headers
In the sample project I have added a Tooltip for the Gantt widget that is in the About page 

@(Html.Kendo().Tooltip()
       .For("#gantt2")
       .Filter("th")
)

Please refer to the Tooltip Demos and documentation linked below as they could be helpful:
- Tooltip api
- Tooltip documentation
- Tooltip Demos

Let us know in case you have additional questions.

Regards,
Neli
Progress Telerik