[hhm8152Participant]

This example – https://www.jqwidgets.com/react/react-pivotgrid/react-pivotgrid-custom-pivot-function.htm

[hhm8152Participant]

Nope.
In this example, the rows and columns were not ordered by alphabetical.
Is there solution?

[hhm8152Participant]

Thanks!

[hhm8152Participant]

is there any way to fix total and subtotal height ?? like row and column (columns: {dataField: value, width: 80, height: 40})
In jqx Pivot grid.

Thanks!!

[hhm8152Participant]

https://docs.google.com/document/d/1nsPpJw6IOjsJjTiu2fsVD8o-z-A0b12MbDv49fXXLYg/edit?usp=sharing

Here is the image.
I don’t know why the total height is different with other row’s cell height.
Is there anyway to block expand total height?

<JqxPivotGrid
style={{ width: 800, height:400 }}
source = {pivotDataSource}
treeStyleRows = {true}
autoResize={true}
scrollBarsEnabled={false}
multipleSelectionEnabled = {true}

/>

[hhm8152Participant]

I mean if width is 20000px, how can I solve it?

[hhm8152Participant]

Can you give a demo code?

[hhm8152Participant]

Based on my understanding, pivotCell.value is brought from the return value of value field’s function.

For example,
If I put string type data in the value field and the function undefined, pivotcell.value is always number (the number of stirngs in the array).

rows: [{ dataField: 'country', width: 190 }],
columns: [],
values: [
	{ dataField: 'date', width: 216, text: 'date' },
	{ dataField: 'cityName' }
]

let customCellsRenderer = function (pivotCell) {
	console.log(pivotCell);
	// console result; 
        // {value: 2, formattedValue: "2.00", isSelected: false, pivotRow: a.jqx.j…d.pivotItem, pivotColumn: a.jqx.j…d.pivotItem}
	return pivotCell.value;
};

rows: [{ dataField: 'country', width: 190 }],
columns: [],
values: [
	{ dataField: 'date', 'function': 'printStringValueForDate'},
	{ dataField: 'cityName', 'function': 'printStringValueForCityName' }
]

If I I put string type data in the value field and the customFunction(to get string values), pivotcell.value is always undefined.

customAggregationFunctions: {
	'printStringValueForDate': function (values) {
		console.log("this is console.log for the date");
		// console.log(values);
		return values;
	},
	'printStringValueForCityName': function (values) {
		console.log("this is console.log for the cityName");
		// console.log(values);
		return values;
	}
},

let customCellsRenderer = function (pivotCell) {
	console.log(pivotCell);
	// console result; 
        // {value: undefined, formattedValue: undefined, isSelected: false, pivotRow: a.jqx.j…d.pivotItem, pivotColumn: a.jqx.j…d.pivotItem}
	return pivotCell.value;
};

So my question is how get I render string’s list in the value on the pivot grid.
Thanks.

[hhm8152Participant]

Hi, Thanks for replying.
By the way, I have to use jqxpivotgrid not jqxgrid, so jqxgrid is not proper option for me.

Can you check https://docs.google.com/document/d/1d_LXydOk3AgAlQyhrrvnat_3OGYEofvMaIVJsdcxmic/edit?usp=sharing

I tried cellrender based on your suggestion but pivotcell.value is always generated by values’s function.

If I put string type data in the value field and the function undefined, pivotcell.value is always number (the number of stirngs in the array).
If I I put string type data in the value field and the customFunction(to get string values), pivotcell.value is always undefined.

customAggregationFunctions: {
	'printStringValueForDate': function (values) {
	  // console.log("this is console.log for the date");
	  return values;
	}
}

let customCellsRenderer = function (pivotCell) {
			console.log(pivotCell);
			return pivotCell.value;
};'

values: [
{ dataField: ‘date’, ‘function’: ‘printStringValueForDate’, width: 216, text: ‘date’, formatSettings: { align: ‘left’, prefix: ”, decimalPlaces: 2 } },
{ dataField: ‘cityName’, ‘function’: ‘printStringValueForCityName’, width: 216, text: ‘cityName’, formatSettings: { align: ‘left’, prefix: ”, decimalPlaces: 2 } }
]`

<strong>Whole Code</strong>

import JqxPivotGrid from 'jqwidgets-framework/jqwidgets-react/react_jqxpivotgrid.js';
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
	render() {
	// prepare sample data
	let data = new Array();
	let countries =
	[
		"Germany", "France", "United States", "Italy", "Spain"
	];
	let dataPoints =
	[
		"2.25", "1.5", "3.0", "3.3", "4.5"
		];
		let date = [
			"2016-09-25 00:00:00","2016-09-25 00:00:00","2016-09-25 00:00:00","2016-09-25 00:00:00","2016-09-25 00:00:00","2016-09-25 00:00:00"
		];
		let cityName = ["paris", "Seoul", "SF", "Tokyo", "Busan"];

	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;
		row["date"] = date[i % countries.length];
		row["cityName"] = cityName[i % countries.length];
		data[i] = row;
	}
	// create a data source and data adapter
	let source =
	{
		localdata: data,
		datatype: "array",
		datafields:
		[
				{ name: 'country', type: 'string' },
				{ name: 'value', type: 'number' },
				{ name: 'date', type: 'string' },
				{ name: 'cityName', type: 'string'}
		]
	};
	let dataAdapter = new jqx.dataAdapter(source);
	dataAdapter.dataBind();
	// create a pivot data source from the dataAdapter
	let pivotDataSource = new jqx.pivot(
		dataAdapter,
		{
			pivotValuesOnRows: false,
			customAggregationFunctions: {
				'printStringValueForDate': function (values) {
					console.log("this is console.log for the date");
					// console.log(values);
					return values;
				},
				'printStringValueForCityName': function (values) {
					console.log("this is console.log for the cityName");
					// console.log(values);
					return values;
				}
			},
			rows: [{ dataField: 'country', width: 190 }],
			columns: [],
			values: [
				{ dataField: 'date', 'function': 'printStringValueForDate', width: 216, text: 'date', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
				{ dataField: 'cityName', 'function': 'printStringValueForCityName', width: 216,  text: 'cityName', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } }
			]
		});

		let customCellsRenderer = function (pivotCell) {
			console.log(pivotCell);
			return pivotCell.value;
		};

			return (
		<JqxPivotGrid
			style={{ width: 800, height: 400 }}
			source = {pivotDataSource}
			treeStyleRows = {true}
			autoResize={true}
			cellsRenderer={customCellsRenderer}
			multipleSelectionEnabled = {true}
		/>
			);
	}
}
ReactDOM.render(<App />, document.getElementById('app'));

[Author]

Posts