source
|
object
|
null
|
Sets or gets the source property.
<!DOCTYPE html> <html lang="en"> <head> <title id="Description"></title> <link rel="stylesheet" href="../jqwidgets/styles/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|
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/site.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;">
|