Custom Elements Documentation

source object null

Sets or gets the source property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

localization object null

Sets or gets the localization property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light", localization:localization
        }
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

scrollBarsEnabled boolean true

Sets or gets the scrollBarsEnabled property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light",scrollBarsEnabled:false
        }
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

selectionEnabled boolean true

Sets or gets the selectionEnabled property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:false, theme:"light"
        }
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

multipleSelectionEnabled boolean true

Sets or gets the multipleSelectionEnabled property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:false, theme:"light"
        }
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

treeStyleRows boolean true

Sets or gets the treeStyleRows property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:false,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

autoResize boolean false

Sets or gets the autoResize property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

itemsRenderer function undefined

Sets or gets the itemsRenderer property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light", itemsRenderer:"itemsRenderer"
        }
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

cellsRenderer function undefined

Sets or gets the cellsRenderer property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light", cellsRenderer:"cellsRenderer"
        }
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotitemexpanding Event

Code examples

Bind to the pivotitemexpanding event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotitemexpanding", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotitemexpanded Event

Code examples

Bind to the pivotitemexpanded event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotitemexpanded", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotitemcollapsing Event

Code examples

Bind to the pivotitemcollapsing event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotitemcollapsing", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotitemcollapsed Event

Code examples

Bind to the pivotitemcollapsed event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotitemcollapsed", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

sortchanging Event

Code examples

Bind to the sortchanging event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("sortchanging", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

sortchanged Event

Code examples

Bind to the sortchanged event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("sortchanged", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

sortremoving Event

Code examples

Bind to the sortremoving event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("sortremoving", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

sortremoved Event

Code examples

Bind to the sortremoved event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("sortremoved", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotitemselectionchanged Event

Code examples

Bind to the pivotitemselectionchanged event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotitemselectionchanged", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotcellmousedown Event

Code examples

Bind to the pivotcellmousedown event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotcellmousedown", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotcellmouseup Event

Code examples

Bind to the pivotcellmouseup event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotcellmouseup", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotcellclick Event

Code examples

Bind to the pivotcellclick event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotcellclick", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotcelldblclick Event

Code examples

Bind to the pivotcelldblclick event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotcelldblclick", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotitemmousedown Event

Code examples

Bind to the pivotitemmousedown event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotitemmousedown", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotitemmouseup Event

Code examples

Bind to the pivotitemmouseup event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotitemmouseup", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotitemclick Event

Code examples

Bind to the pivotitemclick event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotitemclick", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

pivotitemdblclick Event

Code examples

Bind to the pivotitemdblclick event of jqxPivotGrid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
            source:pivotDataSource,treeStyleRows:true,autoResize:false,multipleSelectionEnabled:true, theme:"light"
        }
	window.onload = function() {
		document.querySelector("jqx-pivot-grid").addEventListener("pivotitemdblclick", function(event) {
			// Your code here.
		});
	};
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

getInstance Method

Parameter	Type	Description

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
           
        }
	window.onload = function() {
		var result = document.querySelector("jqx-pivot-grid").getInstance();							
	}
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

refresh Method

Parameter	Type	Description

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
           
        }
	window.onload = function() {
		var result = document.querySelector("jqx-pivot-grid").refresh();							
	}
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

destroy Method

Parameter	Type	Description

Return Value
void

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
           
        }
	window.onload = function() {
		var result = document.querySelector("jqx-pivot-grid").destroy();							
	}
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

getPivotRows Method

Parameter	Type	Description

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
           
        }
	window.onload = function() {
		var result = document.querySelector("jqx-pivot-grid").getPivotRows();							
	}
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

getPivotColumns Method

Parameter	Type	Description

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
           
        }
	window.onload = function() {
		var result = document.querySelector("jqx-pivot-grid").getPivotColumns();							
	}
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

getPivotCells Method

Parameter	Type	Description

Return Value
Object

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">PivotGrid Custom Element - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>   
    <script type="text/javascript" src="../jqwidgets/jqxpivot.js"></script> 
    <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        // prepare sample data
        var data = new Array();
        var countries =
        [
            "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
        ];
        var 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 (var i = 0; i < countries.length * 2; i++) {
            var row = {};
            var 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
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
		var localization = getLocalization('de');
        // create a pivot data source from the dataAdapter
        var pivotDataSource = new jqx.pivot(
            new jqx.dataAdapter(source, {autoBind: true}),
            {
                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 } }
                ]
            });
        JQXElements.settings["pivotSettings"] =
        {
           
        }
	window.onload = function() {
		var result = document.querySelector("jqx-pivot-grid").getPivotCells();							
	}
    </script>
</head>
<body class='default'>
    <jqx-pivot-grid settings="pivotSettings" id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </jqx-pivot-grid>
</body>
</html>

Properties
pivotRow	Object
The row of the pivot cell.
pivotColumn	Object
The column of the pivot cell.

Properties
prefix	String
Optional text that appears at the start of the formatted string
sufix	String
Optional text that appears at the end of the formatted string
decimalSeparator	String	.
Separator for the decimal point in the cell's value
thousandsSeparator	String	,
Separator for the thousands in the cell's value
decimalPlaces	Number	2
Number of decimal places for the cell's value
negativeWithBrackets	Boolean	false
Determines if negative numbers will be displayed in brackets or with a negative sign.

Properties
dataField	String
The dataField in the data source used for this pivot field.
text	String
The text which will appear in the pivot designer when using this field.
align	String
Text alignment when the value of this field is displayed on the pivot rows or pivot columns.
className	String
Name of style to use when displaying this field on the pivot rows or columns.
classNameSelected	String
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.

Properties
dataField	String
The dataField in the data source used for this pivot filter field.
text	String
The text which will appear in the pivot designer when using this field.
filterFunction	function
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.

Properties
pivotValuesOnRows	Boolean	false
Determines whether the pivot values will be displayed on rows or columns.
rows	Boolean	[]
A list of data fields which will be used to build the pivot rows.
columns	Boolean	[]
A list of data fields which will be used to build the pivot columns.
values	Boolean	[]
A list of data fields which will be used to build the pivot values.
filters	Boolean	[]
A list of filters to apply on the source records while building the pivot table.

Custom Elements Documentation

Properties

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods

Properties

Events

Methods

Properties

Properties

Properties

Methods

Properties

Methods

Properties

Properties

Properties

Methods

Properties

Methods

Properties

Properties

Properties