Gantt Chart Expand Event or lazy loading support

6 posts, 0 answers
  1. Muhammet Göktürk
    Muhammet Göktürk avatar
    3 posts
    Member since:
    Mar 2017

    Posted 05 Jul Link to this post

    I want to listen Kendo ui Gantt Chart's expand event.

    Main goal is loading summary rows first and when user clicked expand icon loading detail rows (Tasks).

    Is there a way to find out which row is expanded and get its data (id maybe), or a lazy loading feature will be awesome?

    Thanks.

  2. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 06 Jul Link to this post

    Hello Muhammet,

    On the following Dojo example you will find a basic implementation of the Kendo UI Gantt widget.

    You will notice that I have used the Gantt's dataBound event to check which task is a summary by retrieving the data items which correspond to the current page with the DataSource's view() method. You can also retrieve additional information from the data item like id parent and expanded.

    After selecting the required tasks (summaries in this case) you can easily change their expanded property and call the Gantt's refresh() method to refresh all tasks and dependencies states.  

    Currently LoadOnDemand is not supported by the Gantt widget. You can log this as a feature request in the Kendo UI Feedback portal, so that other people can evaluate and vote for this feature.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Muhammet Göktürk
    Muhammet Göktürk avatar
    3 posts
    Member since:
    Mar 2017

    Posted 06 Jul Link to this post

    Hi Dimitar,

    Thanks for your response. But it's not what i'm looking for.

    Can you check dojo link. I've added these lines.  http://dojo.telerik.com/EpEZem/10

    $('.k-icon.k-i-collapse, .k-icon.k-i-expand').on('click', function(){
                          var tr = $(this).parent().parent();
                          console.log(gantt.dataItem(tr));
                      });

    After first expanding, event fires correctly but next expandings are not firing. (I assume gantt chart clearing events after expanding)

    I know this a hacky way but haven't got another option. If you suggest more proper solution. I appreciate that.

    So my questions:

    1) Which event fires when you expand a row?

    2) Can we solve this problem with my way (Still couldn't figure out, how to bind )?

    3) If gantt chart wrapps treeview inside, can I reach treeview object or its events.

    Thanks.

  4. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 10 Jul Link to this post

    Hello Muhammet,

    The Kendo UI Gantt widget does not expose an expand event. You can observe the behavior on the following Demo. You will notice that when a node is expanded, the dataBound and dataBinding events are triggered. 

    You can attach the click events by modifying the dataBound event from .one to .bind as follows:
    gantt.bind("dataBound", function(e) {                                      
      $('.k-icon.k-i-collapse, .k-icon.k-i-expand').on('click', function(){
        var tr = $(this).parent().parent();
        console.log(gantt.dataItem(tr));
      });
    });

    Concerning your last questions, the Gantt widgets wrapps a Kendo UI TreeList. You can grab a reference to the widget instance by the following code:
    var ganttList = $(".k-treelist").data("kendoGanttList");

    You can try to implement your own custom logic by attaching to the TreeList expand and collapse events. 

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Muhammet Göktürk
    Muhammet Göktürk avatar
    3 posts
    Member since:
    Mar 2017

    Posted 11 Jul Link to this post

    Hi Dimitar,

    I solved with databound. Thanks for your suggestions. Here is my last code, this can be helpful to anyone who struggles with this problem.

    var expandedIds = [];

    var returnWithInnerDataIdList= [];

    ganttChart.bind("dataBound", function(e) {  
         ganttChart.element.find("tr[data-uid]").each(function (e) {
            var dataItem = ganttChart.dataSource.getByUid($(this).attr("data-uid"));
     
            if (dataItem.expanded == true && jQuery.inArray(dataItem.id, expandedIds) < 0) {
                expandedIds.push(dataItem.id);
                if (dataItem.Level == 3) {
                    returnWithInnerDataIdList.push(dataItem.id);
                    loadDataWithNewIds();
                }
            }
            else if (dataItem.expanded == false && jQuery.inArray(dataItem.id, expandedIds) >= 0) {
                expandedIds = jQuery.grep(expandedIds, function (value) {
                    return value != dataItem.id;
                });
            }
        });

    });

     

  6. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 12 Jul Link to this post

    Hi Muhammet,

    I am glad to hear that you have managed to resolve the issue. Thank you for sharing the solution. 

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 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