Start from a custom node when working with OData

[Niels Van Goethem]

Dear, I have a dropdown tree, working with the OData4 adaptor, and the loadOnDemand setting enabled.
Everything works great, but what I am trying to do, is to have the dropdown start from a node that is not the root node. I have its ID. Is there any way to pass this to the query, without breaking the loadOnDemand fuct

[Vishwanathan Muruganantham]

Hi Niels,

Greetings from Syncfusion support.

We have reviewed your query and understand that you need to render the Dropdown Tree starting from a specific node that is not the root node. To achieve this, we suggest using where query to retrieve the specific data from the remote data source. You need to pass the specificID in the where query, ensuring that the type of specificID matches the type of the id in the data source.

Refer to the code snippet below for reference.

…..

 

    public data: Object = new DataManager({

        url: 'https://services.odata.org/V4/Northwind/Northwind.svc',

        adaptor: new ODataV4Adaptor,

        crossDomain: true,

    });

    public specificID = 2;

    // Set queries to filter and fetch remote data

    public query: Object = new Query().from('Employees').select('EmployeeID,FirstName,Title').where('EmployeeID', 'equal', this.specificID).take(5);

 

….

Sample: https://stackblitz.com/edit/angular-97v2yz-6gyfdx?file=src%2Fapp.component.ts

Please check the sample and let us know if you need any further assistance.

Best Regards,
Vishwanathan

[Niels Van Goethem]

Hi, Sorry I have not been clear enough in my initial question. The data is self referential, and I only have the parentId: What I want, is something like this:

• Root
• child 1
• child 1.1
  • child 1.1.1
  • child 1.1.2
    
• child 1.2
• child 1.3
• child 2
• child 2.1
• child 2.2

Say I want to start from child one, I want to visualize this:

• child 1
  • child 1.1
  • child 1.1.1
  • child 1.1.2
  • child 1.2
  • child 1.3

[Vishwanathan Muruganantham]

Hi Niels,

To render a specific child as the root node. To achieve this, we need to retrieve all descendant children and nullify the PID of the new root node, as at least one data entry in the datasource should have a PID of null. This will render the specific child as the root node.

Refer to the code snippet below for reference.

…..

 

     private getDescendants(data: { [key: string]: Object }[], id: any): { [key: string]: Object }[] {

        let result = [];

        const children = data.filter(item => item['pid'] === id);

        for (const child of children) {

            result.push(child);

            result = result.concat(this.getDescendants(data, child['id']));

        }

        return result;

    }

 

    public filteredData: Object[] = this.localData.map(item => {

        if (item['id'] === this.specificID) {

          return { ...item, pid: null };

        }

        return item;

    });

 

    public descendants = this.getDescendants(this.localData, this.specificID);

    public finalData = this.filteredData.filter(item => item['id'] === this.specificID).concat(this.descendants);

 

    public field: Object = { dataSource: this.finalData, value: 'id', parentValue: 'pid', text: 'name', hasChildren: 'hasChild' };

….

Sample: https://stackblitz.com/edit/angular-97v2yz-dl5qu3?file=src%2Fapp.component.ts

Please check the sample and let us know if you need any further assistance.

Best Regards,
Vishwanathan