Tree grid with checkbox on each cell in angular 5

Question

I need this kind of tree grid with checkbox for each cell with nested json in angular 5. I have checked the ag-grid and jqwidgets but couldn't find the solutoin to my problem.

Answer 1

Hierarchical Checkboxes TreeGrid looking like in the provided screenshot can be seen on the link below. You can copy and use the source code from it.

<jqxTreeGrid [theme]="'material'" 
         [source]="dataAdapter"
         [altRows]="true"
         [sortable]="true"
         [hierarchicalCheckboxes]="true"
         [width]="getWidth()"
         [checkboxes]="true"
         [columns]="columns"
         [ready]="ready"
         #TreeGrid>

app.component.ts

import { Component, ViewChild } from '@angular/core';

import { jqxTreeGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtree.ts';

@Component({ selector: 'app-root', templateUrl: './app.component.html' })

export class AppComponent { @ViewChild('TreeGrid') treeGrid: jqxTreeGridComponent

getWidth() : any {
    if (document.body.offsetWidth < 850) {
        return '90%';
    }

    return 850;
}


data: any[] = [
    {
        'id': '1', 'name': 'Corporate Headquarters', 'budget': '1230000', 'location': 'Las Vegas',
        'children':
        [
            {
                'id': '2', 'name': 'Finance Division', 'budget': '423000', 'location': 'San Antonio',
                'children':
                [
                    { 'id': '3', 'name': 'Accounting Department', 'budget': '113000', 'location': 'San Antonio' },
                    {
                        'id': '4', 'name': 'Investment Department', 'budget': '310000', 'location': 'San Antonio',
                        'children':
                        [
                            { 'id': '5', 'name': 'Banking Office', 'budget': '240000', 'location': 'San Antonio' },
                            { 'id': '6', 'name': 'Bonds Office', 'budget': '70000', 'location': 'San Antonio' },
                        ]
                    }
                ]
            },
            {
                'id': '7', 'name': 'Operations Division', 'budget': '600000', 'location': 'Miami',
                'children':
                [
                    { 'id': '8', 'name': 'Manufacturing Department', 'budget': '300000', 'location': 'Miami' },
                    { 'id': '9', 'name': 'Public Relations Department', 'budget': '200000', 'location': 'Miami' },
                    { 'id': '10', 'name': 'Sales Department', 'budget': '100000', 'location': 'Miami' }
                ]
            },
            { 'id': '11', 'name': 'Research Division', 'budget': '200000', 'location': 'Boston' }
        ]
    }
];

source: any =
{
    dataType: 'json',
    dataFields: [
        { name: 'name', type: 'string' },
        { name: 'budget', type: 'number' },
        { name: 'id', type: 'number' },
        { name: 'children', type: 'array' },
        { name: 'location', type: 'string' }
    ],
    hierarchy:
    {
        root: 'children'
    },
    localData: this.data,
    id: 'id'
};

dataAdapter: any = new jqx.dataAdapter(this.source);

columns: any[] = [
    { text: "Name", align: "center", dataField: "name", width: 350 },
    { text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2", width: 300 },
    { text: "Location", dataField: "location", cellsAlign: "center", align: "center" }
];

ready(): void {
    this.treeGrid.expandRow(1);
    this.treeGrid.expandRow(2);
}

}

https://stackblitz.com/github/jqwidgets/angular_demos/tree/master/treegrid/columnhierarchicalcheckboxes/

Hope this helps.

Answer 2

I have use this tree and its perfectly works for me :)