1. Home
  2. Forum
  3. Angular - EJ 2
  4. Hierarchical grid

Hierarchical grid

Hello,

We have this data structure:

0: id: 1

    parentId: null

1: id: 2

    parentId: 1

2: id: 3

    parentId: 1

3: id: 4

    parentId: 3

4: id: 5

    parentId: 3


And want to use it in Grid with multiple childGrids (Hierarchy grids). How can we do it? There is no common field value like `queryString` (as in your demo - https://plnkr.co/edit/xJpipG882WCxUVcCs1IU?p=preview)


8 Replies
RS Renjith Singh Rajendran Syncfusion Team May 21, 2018 12:07 PM UTC

Hi AC, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suggest you to override the default query based on your scenario in the “detailDataBound” event of Grid. Please refer the code example below, 

@Component({ 
    selector: 'app-container', 
    template: `<ejs-grid #grid [dataSource]='pData' height='315px' [childGrid]='childGrid'  (detailDataBound)='dataBound($event)'> 
                    ... 
               </ejs-grid> 
                `, 
    providers: [DetailRowService] 
}) 
export class AppComponent implements OnInit { 
 
    public pData: Object[]; 
   public childGrid: GridModel = { 
        detailDataBound: bound, 
        columns: [ 
            ... 
       ], childGrid: { 
           columns: [ 
                ... 
           ] 
        }, 
    }; 
    dataBound(args:any):void{ 
        ... 
       grid.query = new Query();    //Clear the query 
        grid.dataSource = data;      //Provide your custom data here for first child 
    } 
     function bound(args:any):void{ 
        ... 
       grid.query = new Query();         //Clear the query 
        grid.dataSource = customerData;   //Provide your custom data here for second child 
    } 
} 

In the above sample, we have populated the child Grids by assigning custom data to their dataSource property, after clearing the default query passed to bind data to child Grids. We have also prepared a sample based on your requirement. Please refer the sample link below, 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran.  


UN Unknown Syncfusion Team May 21, 2018 01:34 PM UTC

It is still unclear for me how I should make this in X level deep. I must make a universal grid where I don’t know how many childGrids there will be or what columns they will have. As I wrote previously,  my data comes in one type of objects and each object has its own ID and parent ID (his parent in childGrid).

Its very simple and effective way to store hierarchic data:

  • Object 1

        'EmployeeID': 1,

        'parentId': 1

  • Object 2

        'EmployeeID': 2,

        'parentId': 2

  • Object 3

        'EmployeeID': 3,

        'parentId': 1

  • Object 4

        'EmployeeID': 4,

        'parentId': 1

 

Is it possible to use it in ChildGrid just as it is?

Thanks for the demo (https://plnkr.co/edit/NfDux3wkhnLz032CRqzH?p=preview)  I will investigate it more, but it has a mistake – first childGrid pulls all orders (not those orders that matches EmployeeID). Can you fix it? As it is unclear how one should use `queryString`  there.


UN Unknown Syncfusion Team May 22, 2018 07:02 AM UTC

Here I made it working, by editing the Query, but as you see I must know how many childGrids there will be. Could you advice how I can workaround this? In real world I don’t know how man ChildGrids there will be.

 

DEMO - https://plnkr.co/edit/MVukfldXhbNkAVSqtGA1?p=preview

 

CODE:

 

        // data example

       

        // 'EmployeeID': 11,

        // 'parentId': null,

        // 'LastName': 'Finicuta',

        // 'FirstName': 'Panda',

        // 'Title': 'Sales Representative',

        // 'TitleOfCourtesy': 'Ms.',

        // 'BirthDate': new Date(-664743600000),

        // 'HireDate': new Date(704692800000),

        // 'Address': '507 - 20th Ave. E.\r\nApt. 2A',

        // 'City': 'Seattle',   

    

    makeGrids(n) {

      while(n--) {

        this.dataLoaders['bound' + n] = function(args:any):void{

          var grid = args.detailElement.querySelector('.e-grid').ej2_instances[0];

          grid.query = new Query();

        var items = new DataManager(employeeData).executeLocal(new Query()

            .where('parentId', 'equal', args.data.EmployeeID));     

        grid.dataSource = items;  

        }      

        return {

          detailDataBound: this.dataLoaders['bound' + n],

          columns: [

              { field: 'parentId', headerText: 'parentId ID', textAlign: 'Right', width: 75 },

              { field: 'EmployeeID', headerText: 'EmployeeID', width: 120 },

          ], childGrid: this.makeGrids(n)     

        }       

      }

    }

 

    ngOnInit(): void {

        this.pData = employeeData;

        this.childGrid = {

            detailDataBound:bound,

        columns: [

            { field: 'parentId', headerText: 'parentId ID', textAlign: 'Right', width: 120 },

            { field: 'EmployeeID', headerText: 'Employee ID', width: 150 }

        ], childGrid: this.makeGrids(4)

    };

 

    }

    dataBound(args:any):void{

        var grid = args.detailElement.querySelector('.e-grid').ej2_instances[0];

        grid.query = new Query();

        var items = new DataManager(employeeData).executeLocal(new Query()

            .where('parentId', 'equal', args.data.EmployeeID));     

        grid.dataSource = items;   

    }

     function bound(args:any):void{

        var grid = args.detailElement.querySelector('.e-grid').ej2_instances[0];

        grid.query = new Query();

        var items = new DataManager(employeeData).executeLocal(new Query()

            .where('parentId', 'equal', args.data.EmployeeID));     

        grid.dataSource = items;  

    }


RS Renjith Singh Rajendran Syncfusion Team May 22, 2018 01:55 PM UTC

Hi AC,
We have analyzed the code examples and the sample shared by you. While validating your sample, we could see that you are creating the child grids by using a method named “makegrids” by means of a static value as 10 passed as the argument which represents the total count of the child grids. 

But, we are not certain about your exact requirement. By default, the child Grid will be rendered based on the parent Grid element id and the number of child Grids(nested level) we define in the Grid. And we need to provide relevant data source for all the defined child Grids. 

Are you willing to get the child Grids count for only the main parent Grid or for each parent Grids. Please get back to us with your complete and exact requirement. 

  1. Share the pictorial representation or video demonstration your complete requirement.
  2. Share a detailed explanation of your complete requirement.

The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards, 
Renjith Singh Rajendran. 


UN Unknown Syncfusion Team May 22, 2018 02:37 PM UTC

Thanks for answer The main issue with my solution is that I must know how many childGrids there will be. But I think there isn’t much we can do here and a workaround is to always pass the maximum number in `makeGrids()` (I picked 10, but I’m not sure if this is a maximum number possible).

 

So this issue is kinda solved, unless you think I can improve it somehow (you saw the demo).

 

Thanks for help!


RS Renjith Singh Rajendran Syncfusion Team May 24, 2018 02:25 PM UTC

Hi AC, 

We have analyzed your query. Finding the “n” value of the child Grid is possible only by knowing the depth of the data source you are using to bind data to the Grid. So we suggest you to pass the depth of the data source as the “n” value.   
  
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


UN Unknown Syncfusion Team May 29, 2018 12:51 PM UTC

Hello again,

I have made work hierarchical grid with local data, but I want it to work with remote data. How can I do that? How I need to format queries or sth else to make hierarchical grid while getting data from remote data source?

I have one query from database to get all data for my hierarchy grid. Maybe I need somehow to get it by portions on detailDataBound ebent or sth like that? For example first I get data where my parentId is null, then on expand I am getting data where ParentId = 1 and etc...? But I do not know how to do it correctly.

Also somehow I need to set which of rows have child grid and which do not have child grid (I can get it like some property from WebAPI). Is there a possibility to do that? Because in all examples I can see that child grid have all rows or none of the rows.

I need my hierarchy grid to look something like this (when all nodes expanded):


RS Renjith Singh Rajendran Syncfusion Team June 4, 2018 12:23 PM UTC

Hi AC, 

We have created incident under your account, please check it for better follow up. 

Regards, 
Renjith Singh Rajendran. 


Loader.
Up arrow icon