Sets or gets the source property.

Code example:

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            

Sets or gets the localization property.

Code example:

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource" [localization]="localization">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            

Sets or gets the scrollBarsEnabled property.

Code example:

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource" [scrollBarsEnabled]="false">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            

Sets or gets the selectionEnabled property.

Code example:

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource" [multipleSelectionEnabled]="false">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            

Sets or gets the multipleSelectionEnabled property.

Code example:

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource" [multipleSelectionEnabled]="false">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            

Sets or gets the treeStyleRows property.

Code example:

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource" [treeStyleRows]="false">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            

Sets or gets the autoResize property.

Code example:

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource" [treeStyleRows]="true">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            

Sets or gets the itemsRenderer property.

Code example:

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource" [itemsRenderer]="itemsRenderer">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            

Sets or gets the cellsRenderer property.

Code example:

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource" [cellsRenderer]="cellsRenderer">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            

This event is triggered when a pivot item is expanding. You may use the event's cancel flag to stop further processing.

Bind to the pivotitemexpanding event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotitemexpanding)="Pivotitemexpanding($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotitemexpanding(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered after a pivot item is expanded.

Bind to the pivotitemexpanded event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotitemexpanded)="Pivotitemexpanded($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotitemexpanded(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered when a pivot item is collapsing. You may use the event's cancel flag to stop further processing.

Bind to the pivotitemcollapsing event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotitemcollapsing)="Pivotitemcollapsing($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotitemcollapsing(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered after a pivot item is collapsed.

Bind to the pivotitemcollapsed event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotitemcollapsed)="Pivotitemcollapsed($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotitemcollapsed(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered the sorting is about to change. You may use the event's cancel flag to stop further processing.

Bind to the sortchanging event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onSortchanging)="Sortchanging($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Sortchanging(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered after the sorting order has changed.

Bind to the sortchanged event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onSortchanged)="Sortchanged($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Sortchanged(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered the sorting is about to be removed. You may use the event's cancel flag to stop further processing.

Bind to the sortremoving event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onSortremoving)="Sortremoving($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Sortremoving(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered after the sorting has been sortremoved.

Bind to the sortremoved event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onSortremoved)="Sortremoved($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Sortremoved(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered after the selection of a pivot item has changed.

Bind to the pivotitemselectionchanged event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotitemselectionchanged)="Pivotitemselectionchanged($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotitemselectionchanged(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered on mousedown over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Bind to the pivotcellmousedown event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotcellmousedown)="Pivotcellmousedown($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotcellmousedown(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered on mouseup over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Bind to the pivotcellmouseup event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotcellmouseup)="Pivotcellmouseup($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotcellmouseup(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered on click over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Bind to the pivotcellclick event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotcellclick)="Pivotcellclick($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotcellclick(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered on double click over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Bind to the pivotcelldblclick event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotcelldblclick)="Pivotcelldblclick($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotcelldblclick(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered on mousedown over a pivot grid item. You may use the event's cancel flag to stop further processing.

Bind to the pivotitemmousedown event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotitemmousedown)="Pivotitemmousedown($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotitemmousedown(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered on mouseup over a pivot grid item. You may use the event's cancel flag to stop further processing.

Bind to the pivotitemmouseup event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotitemmouseup)="Pivotitemmouseup($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotitemmouseup(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered on click over a pivot grid item. You may use the event's cancel flag to stop further processing.

Bind to the pivotitemclick event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotitemclick)="Pivotitemclick($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotitemclick(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

This event is triggered on double click over a pivot grid item. You may use the event's cancel flag to stop further processing.

Bind to the pivotitemdblclick event of jqxPivotGrid.

Code examples

import { Component } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid (onPivotitemdblclick)="Pivotitemdblclick($event)"
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent {
    Pivotitemdblclick(event: any): void 
    {
        // Do Something
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            
            							
            						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myPivotGrid') myPivotGrid: jqxPivotGridComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myPivotGrid.getInstance();
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            							
            						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myPivotGrid') myPivotGrid: jqxPivotGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myPivotGrid.refresh();
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            							
            						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myPivotGrid') myPivotGrid: jqxPivotGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myPivotGrid.destroy();
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            							
            						

interface PivotGridRows {
     resizable: Boolean;
     sortable: Boolean;
     showExpandCollapseButtons: Boolean;
     parentPivotGrid: jqxPivotGrid;
     items: Array<PivotGridItem>;
     valueItems: Array<PivotGridItem>;
     isHidden: Boolean;
}
interface PivotGridItem {
     isExpanded: Boolean;
     isHidden: Boolean;
     isSelected: Boolean;
     parentItem: PivotGrdItem;
     hierarchy: Any;
     parentPivotGrid: jqxPivotGrid;
     items: Array<PivotGidItem>;
     valueItems: Array<PivotGidItem>;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myPivotGrid') myPivotGrid: jqxPivotGridComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myPivotGrid.getPivotRows();
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            							
            						

interface PivotGridColumns {
     resizable: Boolean;
     sortable: Boolean;
     showExpandCollapseButtons: Boolean;
     parentPivotGrid: jqxPivotGrid;
     items: Array<PivotGridItem>;
     valueItems: Array<PivotGridItem>;
     isHidden: Boolean;
}
interface PivotGridItem {
     isExpanded: Boolean;
     isHidden: Boolean;
     isSelected: Boolean;
     parentItem: PivotGrdItem;
     hierarchy: Any;
     parentPivotGrid: jqxPivotGrid;
     items: Array<PivotGidItem>;
     valueItems: Array<PivotGidItem>;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myPivotGrid') myPivotGrid: jqxPivotGridComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myPivotGrid.getPivotColumns();
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            							
            						

interface PivotGridCells {
     hitTest: Any;
     clear: Void;
     setCellValue: Void;
     getCellValue: Any;
     drillThroughCell: Array<Any>;
     selectCell: Void;
     unselectCell: Void;
     clearSelection: Void;
     isCellSelected: Boolean;
     getSelectedCellsCount: Number;
     getSelectedCells: Array<PivotGridCell>;
     getNextCell: Any;
}
interface PivotGridCell {
     pivotRow: PivotGridItem;
     pivotColumn: PivotGridItem;
}
interface PivotGridItem {
     isExpanded: Boolean;
     isHidden: Boolean;
     isSelected: Boolean;
     parentItem: PivotGrdItem;
     hierarchy: Any;
     parentPivotGrid: jqxPivotGrid;
     items: Array<PivotGidItem>;
     valueItems: Array<PivotGidItem>;
}

import { Component, ViewChild, AfterViewInit } from "@angular/core";
             
@Component({
    selector: 'app-root',
    template: `
       `<jqxPivotGrid #myPivotGrid 
            [width]="800" [height]="400" [source]="pivotDataSource">
        </jqxPivotGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myPivotGrid') myPivotGrid: jqxPivotGridComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myPivotGrid.getPivotCells();
    }

    constructor()
    {
        this.pivotDataSource = this.createPivotDataSource();
    }
 
    pivotDataSource: null;
 
    createPivotDataSource(): any {
        // Prepare Sample Data
        let data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
        ];
 
        for (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and Data Adapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
	            { name: 'country', type: 'string' },
	            { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values:
                [
                    { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
 
        return pivotDataSource;
    }
}
            
            							
            						

Gets or sets the type of the pivot designer - pivotGrid or pivotChart.

Gets or sets the instance of the widget component controlled by the pivot designer component.

The row of the pivot cell.

The column of the pivot cell.

Optional text that appears at the start of the formatted string

Optional text that appears at the end of the formatted string

Separator for the decimal point in the cell's value

Separator for the thousands in the cell's value

Number of decimal places for the cell's value

Determines if negative numbers will be displayed in brackets or with a negative sign.

Returns the pivot cell at the corresponding position if exists

Clears all pivot cells

Sets the value of a pivot cell

Gets the value of a pivot cell

Drills through a pivot cells and returns the respective source data records

Selects a pivot cell

Unselects a pivot cell

Clears the selection of all selected pivot cells

Checks if a pivot cell is selected

Returns the number of selected cells

Returns an array of all selected cells

Returns the cell left, right, above or below a specific pivot cell

Gets or sets if the collection of pivot items is resizable.

Gets or sets if the collection of pivot items is sortable.

Gets or sets if expand/collapse buttons are visible.

Returns a reference to the parent pivot grid instance.

Returns an array of all child pivot items.

Returns an array of all child pivot value items.

Returns true if the pivot items collection is hidden.

Makes the pivot items collection visible

Hides the pivot items collection

Refreshes the content of the pivot items collection

Returns the depth of the collection

Auto resizes the pivot items collection

Returns the sort item of the collection

Returns the sort order of the collection

Sorts the items collection

Removes the sort order of the collection

Selects a pivot item

Clears the selection of a pivot item

Clears the selection of all items in the collection

Returns all selected items in an array

The dataField in the data source used for this pivot field.

The text which will appear in the pivot designer when using this field.

Text alignment when the value of this field is displayed on the pivot rows or pivot columns.

Name of style to use when displaying this field on the pivot rows or columns.

Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.

The dataField in the data source used for this pivot filter field.

The text which will appear in the pivot designer when using this field.

Implementation of the filtering function used to skip/filter records from the data source. The function should return true if the record should be filtered, otherwise false.

Returns true if the pivot item is expanded.

Returns true if the pivot item is hidden.

Returns true if the pivot item is hidden.

Returns a reference to the parent item.

Returns a reference to the parent rows or columns hierarchy.

Returns a reference to the parent pivot grid instance.

Returns an array of all child pivot items.

Returns an array of all child pivot value items.

Gets the width of the pivot item

Gets the displayed width of the pivot item

Auto resizes the pivot item

Gets the height of the pivot item

Gets the displayed height of the pivot item

Sets the height of the pivot item

Expands the pivot item so all sub-items will be visible

Collapses the pivot item so all sub-items will be invisible

Gets or sets if the collection of pivot items is resizable.

Gets or sets if the collection of pivot items is sortable.

Gets or sets if expand/collapse buttons are visible.

Returns a reference to the parent pivot grid instance.

Returns an array of all child pivot items.

Returns an array of all child pivot value items.

Returns true if the pivot items collection is hidden.

Makes the pivot items collection visible

Hides the pivot items collection

Refreshes the content of the pivot items collection

Returns the depth of the collection

Auto resizes the pivot items collection

Returns the sort item of the collection

Returns the sort order of the collection

Sorts the items collection

Removes the sort order of the collection

Selects a pivot item

Clears the selection of a pivot item

Clears the selection of all items in the collection

Returns all selected items in an array

Determines whether the pivot values will be displayed on rows or columns.

A list of data fields which will be used to build the pivot rows.

A list of data fields which will be used to build the pivot columns.

A list of data fields which will be used to build the pivot values.

A list of filters to apply on the source records while building the pivot table.

The dataField in the data source used for this pivot field.

The data aggregation function to use when calculating the cells values. You can either use the name of one of the built in functions like 'sum', 'count', 'min', 'max', 'product', 'average' or provide the implementation of your own function.

The text which will appear in the pivot designer when using this field.

Text alignment when the value of this field is displayed on the pivot rows or pivot columns.

Name of style to use when displaying this field on the pivot rows or columns.

Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.

Name of style to use when displaying the cells of this pivot value field.

Name of style to use when displaying this cells this pivot value field when the cells are selected.

X coordinate

Y coordinate