Gantt Chart Expand Event or lazy loading support

[Muhammet Göktürk]

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.

[Dimitar]

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

[Muhammet Göktürk]

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.

[Dimitar]

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

[Muhammet Göktürk]

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 = [];
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;
            });
        }
    });

 

[Dimitar]

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