Expand or collapse a row freezes UI

[Dmitry Vorobyev]

Hi,

We have a customer who has a lot of tasks displayed via a Gantt chart. The tasks have a lot of connections, too. When the user expands/collapse a containing task, the system freezes for a while before actual changing the state to expanded or collapsed. We tried to display a loading indicator or even a plain "Loading..." text before expand or collapse, but it was displayed after the operation is complete, i.e. being useless.

Seems like expand/collapse locks UI and the user might think that the system has become irresponsive. My question is, is there any way to reduce the delay required to expand/collapse a task containing a lot of child tasks or is there a way to display a loading indicator during that operation?

Thanks in advance.

[Gopinath Muniraj]

Hi Dmitry, 

Thanks for contacting Syncfusion support. 

Currently, we are not having the support for reduce the time taken to expand or collapse or parent record with large number of tasks. But we achieved your requirement of rendering any loading indicator in that time using some workaround. 

As per the requirement, we have rendered the spinner in the meantime using mouseDown event, when the expanding and collapsing of parent tasks take too much time. Please find the code snippet below, 

  

//… 

collapsed (args) { 

        this.hideSpinner(); 

    } 

    expanded (args) { 

        this.hideSpinner(); 

    } 

render() { 

        return <GanttComponent id='ganttContainer' dataSource={data} collapsed={this.collapsed} expanded={this.expanded}> <Inject services={[Edit, Selection, Toolbar]}/> 

        </GanttComponent>; 

    } 

document.getElementById('root').addEventListener('mousedown', function (args) { 

    var ganttObj = document.getElementById('ganttContainer').ej2_instances[0]; 

    var gridEle = null; 

    var chartEle = null; 

    var record; 

    var action; 

    var className = args.target.className; 

    if ((className === "e-icons e-treegridcollapse") || (className === "e-icons e-treegridexpand")) { 

        gridEle = closest(args.target, '.e-row'); 

    } 

    if (((args.target.classList).contains("e-gantt-parent-taskbar-inner-div")) || 

        ((args.target.classList).contains("e-gantt-parent-progressbar-inner-div"))) { 

        chartEle = closest(args.target, '.e-chart-row'); 

    } 

    if (gridEle) { 

        var index = ganttObj.treeGrid.getRows().indexOf(gridEle); 

        record = ganttObj.flatData[index]; 

    } 

    else if (chartEle) { 

        // eslint-disable-next-line 

        var index = ganttObj.ganttChartModule.getIndexByTaskBar(chartEle); 

        record = ganttObj.flatData[index]; 

    } 

    if ((record && record.hasChildRecords) || (args.target.textContent === "Collapse all") || 

        (args.target.textContent === "Expand all")) { 

        ganttObj.showSpinner(); 

    } 

    if ((className).indexOf("expand") !== -1) { 

        action = "collapse"; 

    } 

    else if ((className).indexOf("collapse") !== -1) { 

        action = "expand"; 

    } else if (args.target.textContent === "Collapse all") { 

        action = "Collapse all"; 

    } else if (args.target.textContent === "Expand all") { 

        action = "Expand all"; 

    } 

    setTimeout(function () { 

        if (record && record.hasChildRecords) { 

            if (action === "collapse") { 

                ganttObj.collapseByID(parseInt(record.ganttProperties.taskId)); 

            } else if (action === "expand") { 

                ganttObj.expandByID(parseInt(record.ganttProperties.taskId)); 

            } 

        } else { 

            if (action === "Collapse all") { 

                ganttObj.collapseAll(); 

            } else if (action === "Expand all") { 

                ganttObj.expandAll(); 

            } 

        } 

    }, 1000); 

//… 

  

We have prepared a local sample for your reference. In this given example, while we are expanding or collapsing your treeGrid icon or parent taskbar click, the spinner is rotating until the expand or collapse action is gets completed. Please find the sample link below. 

Sample: https://www.syncfusion.com/downloads/support/forum/157624/ze/Expand-collapse-1543700429 

  

Please let us know, if you need any further assistance on this. 

Thanks, 

Gopinath M