SHARE
TWEET

Untitled

a guest Jun 20th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Component, ViewChild, ElementRef } from '@angular/core';
  2. import {CustomCellViewComponent} from './../Custom/CustomCellViewComponent';
  3.  
  4. @Component({
  5.   selector: 'app-subgrid-grid',
  6.   template: `
  7.     <db-angular-tree-grid
  8.     (expand)="onExpand($event)"
  9.     [data]="data"
  10.     [configs]="configs">
  11.     </db-angular-tree-grid>
  12.   `
  13. })
  14. export class SubgridComponent {
  15.     data: any[] = [
  16.       { id: 1, name: 'Sriya', age: 60, weight: 60, gender: 1, phone: 7930343463},
  17.       { id: 2, name: 'Sneha', age: 40, weight: 90, gender: 1, phone: 7930343463}
  18.     ];
  19.     subgrid_1: any = [
  20.       { technology_id: 1, type: 'Web', technology: 'Angular', experience: 2, parent: 1},
  21.       { technology_id: 2, type: 'Web', technology: 'HTML5', experience: 3, parent: 1},
  22.       { technology_id: 3, type: 'Web', technology: 'CSS3', experience: 2, parent: 1},
  23.       { technology_id: 4, type: 'Web', technology: 'Javascript', experience: 6, parent: 1},
  24.     ];
  25.  
  26.     subgrid_2: any = [
  27.       { technology_id: 5, type: 'Web', technology: 'Angular', experience: 3, parent: 2},
  28.       { technology_id: 6, type: 'Web', technology: 'HTML5', experience: 3, parent: 2},
  29.       { technology_id: 7, type: 'Web', technology: 'CSS3', experience: 2, parent: 2},
  30.       { technology_id: 8, type: 'Web', technology: 'Javascript', experience: 8, parent: 2},
  31.     ];
  32.  
  33.     configs: any = {
  34.     id_field: 'id',
  35.     parent_display_field: 'name',
  36.     css: { // Optional
  37.       expand_class: 'fa fa-caret-right',
  38.       collapse_class: 'fa fa-caret-down',
  39.     },
  40.     columns: [
  41.       {
  42.         name: 'name',
  43.         header: 'Name',
  44.         editable: true
  45.       },
  46.       {
  47.         name: 'age',
  48.         header: 'Age',
  49.         editable: true,
  50.         renderer: function(value) {
  51.           return value + ' years';
  52.         }
  53.       },
  54.       {
  55.         name: 'weight',
  56.         header: 'Weight'
  57.       },
  58.       {
  59.         name: 'gender',
  60.         header: 'Gender',
  61.         renderer: function(value) {
  62.           return value ? 'Male' : 'Female';
  63.         }
  64.       },
  65.       {
  66.         name: 'phone',
  67.         header: 'Phone'
  68.       }
  69.     ],
  70.     subgrid: true,
  71.     subgrid_config: {
  72.       id_field: 'technology_id',
  73.       show_summary_row: true,
  74.       columns: [
  75.         {
  76.           name: 'type',
  77.           header: 'Type'
  78.         },
  79.         {
  80.           name: 'technology',
  81.           header: 'Technology',
  82.           type: 'custom',
  83.           sortable: true,
  84.           component: CustomCellViewComponent,
  85.           summary_renderer: () => {
  86.             return '<b>Total:</b>';
  87.           }
  88.         },
  89.         {
  90.           name: 'experience',
  91.           header: 'Experience',
  92.           sortable: true,
  93.           renderer: function(value) {
  94.             return value + ' years';
  95.           },
  96.           summary_renderer: (data) => {
  97.             return data.map(rec => rec.experience).reduce((a, b) => a + b, 0) + ' years';
  98.           }
  99.         }
  100.       ]
  101.     }
  102.     };
  103.  
  104.     onExpand(e) {
  105.       const row_data = e.data;
  106.       if (row_data.id === 1) {
  107.         setTimeout(() => {
  108.           e.resolve(this.subgrid_1);
  109.         }, 2000);
  110.        
  111.       } else {
  112.         setTimeout(() => {
  113.           e.resolve(this.subgrid_2);
  114.         }, 2000);
  115.       }
  116.     }
  117. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top