[ANGULAR] Expanded Tree icon does not collapse when closing the parent

[uniyal.aakash]

Step 1:
After expanding a Parent node the collapse icon changes to expanded icon

Expanded.JPG (11.11 KiB) Viewed 256 times

Step 2:
But after expanding it once, if I click on the task to collapse the parent this happens

Collapsed.JPG (10.09 KiB) Viewed 256 times

Note: the parent is collapsed now but the icon still shows of the expanded one, I have checked the isExpanded property of that task and it comes properly (isExpanded false during the 2nd step)

fyi, the children are loaded on demand after expanding the parent.

Last checked it was not working in 4.3.9 and also in the latest 5.1.0

[alex.l]

Hi uniyal.aakash,

Please post your code, how did you implement that and how to reproduce that.

fyi, the children are loaded on demand after expanding the parent.

Especially how did you implement load on demand.

[uniyal.aakash]

 const project = new CustomProjectModel({
    autoLoad: false,
    transport: {
      load: {
        url: appConstants.urls.getReportData + '?xId=' + pId,
        sendAsFormData: true,
        method: 'POST',
        headers: sm
      }
    },

    taskStore: {
      dependencyIdField: 'id',
      readUrl: appConstants.urls.getReportData + '?xId=' + pId,
      useRestfulMethods: true,
      httpMethods: {
        read: 'POST'
      },
      headers: sm,
      params: {
        ReportId: '1301',
        ReportSetReportId: null,
        IsReportConsumption: true,
        Filters: JSON.stringify(this.reportParameters)
      }
    }
  });

Not sure if needed but i also have a custom override for the get call which actually puts the data in the Post req's body

class CustomBryntumOverride {
  static get target() {
    return {
      class: AjaxHelper
    };
  }

  static get(url, options) {
    const urlSplit = url.split('id=');
    function getParameterByName(name, urlParam = window.location.href) {
      name = name.replace(/[\[\]]/g, '\\$&');
      const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(urlParam);
      if (!results) {
        return null;
      }
      if (!results[2]) {
        return '';
      }
      return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }
    const filters = getParameterByName('Filters', url);
    const filterArray = JSON.parse(filters);

filterArray.push({
  Name: 'Gantt_Node_Selected',
  Value: urlSplit[1]
});

// set method
options.method = 'POST';
// set payload
options.body = JSON.stringify({
  ReportId: '1301',
  ReportSetReportId: null,
  IsReportConsumption: true,
  ForTaskStore: true,
  Filters: filterArray
});
const programId = getParameterByName('programId', url);
const finalUrl = appConstants.urls.getReportData + '?programId=' + programId;
// call overridden function
return this['_overridden'].get.call(this, finalUrl, options);
  }
}
Override.apply(CustomBryntumOverride);
export class CustomProjectModel extends ProjectModel {
  encode(packet) {
    let result = super.encode(packet);
    // for load requests send URLSearchParams instance in request body
    if (packet === 'load') {
      const body = new FormData();
      result = JSON.stringify(body);
    }

return result;
  }
}

For Project load it provides

"tasks":{"rows":[{"id":"12763812738162376123","name":"Project node","startDate":"2021-01-01T00:00:00","endDate":"2024-01-31T00:00:00","children":true,"parentId":null}]}

As children: true, it renders an icon denoting there are childrens under this node, when i click on it the next taskStore API fires and gives me its children and renders them (while opening the parent).

This is the point where the icon is supposed to show the expanded icon which it does, but after clicking on it again, the children list gets collapsed but the icon remains in the "Open" state

[alex.l]

when i click on it the next taskStore API fires and gives me its children and renders them (while opening the parent).

May I see what events you subscribed on to handle that and what the code you run in those handlers?