Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Component, ViewChild, ElementRef } from '@angular/core';
- import {CustomCellViewComponent} from './../Custom/CustomCellViewComponent';
- @Component({
- selector: 'app-subgrid-grid',
- template: `
- <db-angular-tree-grid
- (expand)="onExpand($event)"
- [data]="data"
- [configs]="configs">
- </db-angular-tree-grid>
- `
- })
- export class SubgridComponent {
- data: any[] = [
- { id: 1, name: 'Sriya', age: 60, weight: 60, gender: 1, phone: 7930343463},
- { id: 2, name: 'Sneha', age: 40, weight: 90, gender: 1, phone: 7930343463}
- ];
- subgrid_1: 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},
- ];
- subgrid_2: 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},
- ];
- configs: any = {
- id_field: 'id',
- parent_display_field: 'name',
- css: { // Optional
- expand_class: 'fa fa-caret-right',
- collapse_class: 'fa fa-caret-down',
- },
- 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',
- show_summary_row: true,
- columns: [
- {
- name: 'type',
- header: 'Type'
- },
- {
- name: 'technology',
- header: 'Technology',
- type: 'custom',
- sortable: true,
- component: CustomCellViewComponent,
- summary_renderer: () => {
- return '<b>Total:</b>';
- }
- },
- {
- name: 'experience',
- header: 'Experience',
- sortable: true,
- renderer: function(value) {
- return value + ' years';
- },
- summary_renderer: (data) => {
- return data.map(rec => rec.experience).reduce((a, b) => a + b, 0) + ' years';
- }
- }
- ]
- }
- };
- onExpand(e) {
- const row_data = e.data;
- if (row_data.id === 1) {
- setTimeout(() => {
- e.resolve(this.subgrid_1);
- }, 2000);
- } else {
- setTimeout(() => {
- e.resolve(this.subgrid_2);
- }, 2000);
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement