gantt is empty first time

7 posts, 0 answers
  1. Ramana Meda
    Ramana Meda avatar
    7 posts
    Member since:
    May 2018

    Posted 14 Jun 2018 Link to this post

    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.

  2. Ramana Meda
    Ramana Meda avatar
    7 posts
    Member since:
    May 2018

    Posted 16 Jun 2018 Link to this post

    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.
  3. Neli
    Admin
    Neli avatar
    221 posts

    Posted 18 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Ramana Meda
    Ramana Meda avatar
    7 posts
    Member since:
    May 2018

    Posted 18 Jun 2018 in reply to Neli Link to this post

    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

  5. Neli
    Admin
    Neli avatar
    221 posts

    Posted 20 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Ramana Meda
    Ramana Meda avatar
    7 posts
    Member since:
    May 2018

    Posted 24 Jun 2018 in reply to Neli Link to this post

    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

  7. Neli
    Admin
    Neli avatar
    221 posts

    Posted 26 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top