Angular Tree Grid, Angular Sub Grid, Angular Grouping Grid

I created two Angular packages in the past, one is ngtreegrid and another one is angular-tree-grid. I often get asked about what is the difference between these two. Well that's a fair question! Let's figure out.

ngtreegrid(Angular Grouping Grid): 

Let's suppose we have a list of books in our store. We want to see a list of books by type of book.

books = [

  { type: 'Programming', name: 'Angular', price: 90 },

  { type: 'Programming', name: 'Python', price: 70 },

  { type: 'Programming', name: 'PHP', price: 80 },

  { type: 'Programming', name: 'Java', price: 50 },

  { type: 'Physics', name: 'Thermodynamics', price: 50 },

  { type: 'Physics', name: 'Quantum Physics', price: 20 },

  { type: 'Physics', name: 'Particle Physics', price: 45 },

  { type: 'Physics', name: 'General Physics', price: 55 }

];

Now let's see how we can configure ngtreegrid for this data.

configs = {
    group_by: 'type',
    group_by_header: 'Product Type',
    columns: [{
        header: 'Product Name',
        name: 'name'
      }, {
        header: 'Price',
        name: 'price',
        renderer: (value, rec) => {
          return '$' + value;
        }
    }]
};

So here we need to tell the ngtreegrid that we want to see the books by "type". Setting a group_by_header is good. And we need to tell the ngtreegrid which columns we want to show. Looks like renderer comes handy customize field a bit.

Below is the result of above settings.

Some times we want to know the aggregated price of all Programming books. We can add a "group_aggregator" in the price column. See this Example. 

NOTE: Basically this grid groups data by a field or multiple fields. Explore Demo to know more.

angular-tree-grid(Angular tree grid):

Let's suppose we have hierarchical data(parent-child relationship) of families of a certain region.

data: [
    { id: 1, name: 'Bimal', age: 60, weight: 60, gender: 1, phone: 7930343463, parent: 0},
    { id: 2, name: 'Bhagi', age: 40, weight: 95, gender: 1, phone: 7930343463, parent: 1},
    { id: 3, name: 'Kalyana', age: 36, weight: 105, gender: 1, phone: 7930343463, parent: 1},
    { id: 4, name: 'Prakash', age: 20, weight: 20, gender: 1, phone: 7930343463, parent: 2},
    { id: 5, name: 'Jitu', age: 21, weight: 61, gender: 1, phone: 7930343463, parent: 3},
    { id: 6, name: 'Sunil', age: 60, weight: 87, gender: 1, phone: 7930343463, parent: 34},
    { id: 7, name: 'Tadit', age: 40, weight: 60, gender: 1, phone: 7930343463, parent: 6},
    { id: 8, name: 'Suraj', age: 36, weight: 60, gender: 1, phone: 7930343463, parent: 6},
    { id: 9, name: 'Swarup', age: 20, weight: 40, gender: 1, phone: 7930343463, parent: 8},
    { id: 10, name: 'Lakin', age: 21, weight: 55, gender: 1, phone: 7930343463, parent: 8},
];

id is the primary key. There is a parent field for every row that tells who is the parent of that row. parent of the first row is 0. There is no id with value 0. So this is the root node. Now let's see how we can configure angular-tree-grid for this data.

configs = {
    id_field: 'id',
    parent_id_field: 'parent',
    parent_display_field: 'name',
    columns: [
      {
        name: 'name',
        header: 'Name'
      },
      {
        name: 'age',
        header: 'Age',
        renderer: function(value) {
          return value + ' years';
        }
      },
      {
        name: 'weight',
        header: 'Weight'
      },
      {
        name: 'gender',
        header: 'Gender',
        renderer: function(value) {
          return value ? 'Male' : 'Female';
        }
      },
      {
        name: 'phone',
        header: 'Phone'
      }
    ]
};

Here we need to tell angular-tree-grid which one is the primary key(or id_field, in our case id), foreign key(or parent_id_field, in our case parent) and display field(parent_display_field, in our case name) of the row. As usual we need to configure columns.

Below is the result of above settings.

NOTE: Basically this grid is for hierarchical data. See Demo for other features.

Angular Sub Grid:

This is one of the feature of the angular-tree-grid. Let's suppose we have a list of people with their experiences in multiple technologies.

data = [
 { id: 1, name: 'Sriya', age: 26, weight: 60, gender: 1, phone: 7930343463},
 { id: 2, name: 'Sneha', age: 23, weight: 90, gender: 1, phone: 7930343463}
];
experience_for_sriya: any = [
 { technology_id: 1, type: 'Web', technology: 'Angular', experience: 2, parent: 1},
 { technology_id: 2, type: 'Web', technology: 'HTML5', experience: 3, parent: 1},
 { technology_id: 3, type: 'Web', technology: 'CSS3', experience: 2, parent: 1},
 { technology_id: 4, type: 'Web', technology: 'Javascript', experience: 6, parent: 1},
];

experience_for_sneha: any = [
 { technology_id: 5, type: 'Web', technology: 'Angular', experience: 3, parent: 2},
 { technology_id: 6, type: 'Web', technology: 'HTML5', experience: 3, parent: 2},
 { technology_id: 7, type: 'Web', technology: 'CSS3', experience: 2, parent: 2},
 { technology_id: 8, type: 'Web', technology: 'Javascript', experience: 8, parent: 2},
];

Here structure of data is different from what we saw before. Normally we would make an Ajax to fetch experiences of a person. 

Let's see how we can configure angular-tree-grid to show this data.

configs = {
    id_field: 'id',
    parent_display_field: 'name',
    columns: [
      {
        name: 'name',
        header: 'Name',
        editable: true
      },
      {
        name: 'age',
        header: 'Age',
        editable: true,
        renderer: function(value) {
          return value + ' years';
        }
      },
      {
        name: 'weight',
        header: 'Weight'
      },
      {
        name: 'gender',
        header: 'Gender',
        renderer: function(value) {
          return value ? 'Male' : 'Female';
        }
      },
      {
        name: 'phone',
        header: 'Phone'
      }
    ],
    subgrid: true,
    subgrid_config: {
      id_field: 'technology_id',
      columns: [
        {
          name: 'type',
          header: 'Type'
        },
        {
          name: 'technology',
          header: 'Technology',
          sortable: true
        },
        {
          name: 'experience',
          header: 'Experience',
          sortable: true,
          renderer: function(value) {
            return value + ' years';
          }
        }
      ]
    }
};

Looks like we need 2 more configs. One is subgrid and another is subgrid_config. subgrid_config needs to have id_field and columns configs.

Here we want to show experiences on expand of the row. Show we need to listen to the expand event. 

onExpand(e) {
  const row_data = e.data;
  if (row_data.id === 1) {
 setTimeout(() => {
   e.resolve(experience_for_sriya);
 }, 2000);
 
  } else {
 setTimeout(() => {
   e.resolve(experience_for_sneha);
 }, 2000);
  }
}

On expand we will get the expanded row_data and promise object. After we get the data from ajax we need to resolve this promise by passing the data as a parameter. I added setTimeout to make it feel like Ajax :).  See whole code here.

Below is the result of above config.

NOTE: Basically subgrid is a feature of angular-tree-grid library. 

Please feel free to contact me if you are facing any issues with these libraries. I will be happy to help you out.

Thanks for reading!