jqxpivotgrid row / col format

[hhm8152Participant]

Hi,
I’m trying to change columns and rows format by not using itemrender.
Is there any chance to do it?

Here is the code.
I’m trying to change date format to Sep 25 2016 in columns.
when i’ve got multiple rows and columns, I’ve tried to change it by using itemrenderer but it’s impossible.

Is there custom format function to apply to row and columns ? (like formatFunction to the value)

render() {
		// prepare sample data
		let countryData = [
			{ country: 'France', date: "2016-09-25 00:00:00", cityname: 'Paris', ID: 1000 },
			{ country: 'South KOREA', date: '"2016-09-25 00:00:00"', cityname: 'Seoul', ID: 1000 },
			{ country: 'Italy', date: '"2016-09-25 00:00:00"', cityname: 'Rome', ID: 1010 },
			{ country: 'Spain', date: '"2016-09-25 00:00:00"', cityname: 'Barcelona', ID: 1100 },
			{country: 'France', date: '"2016-09-28 00:00:00"', cityname: 'Rome', ID: 1102 }
		];

		// create a data source and data adapter
		let source =
			{
				localdata: countryData,
				datatype: "array",
				datafields:
					[
						{ name: 'country', type: 'string' },
						{ name: 'date', type: 'string' },
						{ name: 'cityname', type: 'string' },
						{ name: 'value', type: 'number', map: 'ID' }
					]
			};

		let dataAdapter = new $.jqx.dataAdapter(source);
		dataAdapter.dataBind();

		let getDateByID = function (id) {
			for (let i = 0; i < countryData.length; i++) {
				if (countryData[i].ID == id) {
					return countryData[i].date;
				}
			}
		};
		let getCityByID = function (id) {
			for (let i = 0; i < countryData.length; i++) {
				if (countryData[i].ID == id) {
					return countryData[i].cityname;
				}
			}
		};

		// create a pivot data source from the dataAdapter
		let pivotDataSource = new $.jqx.pivot(
			dataAdapter,
			{
				pivotValuesOnRows: false,
				rows: [{ dataField: 'country', width: 190 }, {dataField:'value'},{ dataField: 'date', width: 190 }],
				columns: [],
				values: [
					// { dataField: 'value', width: 200, text: 'date', 'function': 'max' },
					{ dataField: 'value', width: 200, text: 'cityName', 'function': 'max' }
				]
			});

		let customCellsRenderer = function (pivotCell) {
			let id = pivotCell.value;
			let city = getCityByID(id);
			let date = getDateByID(id);

			let cellText = '';
			if (pivotCell.pivotColumn.text == 'date') {
				cellText = date;
			}

			if (pivotCell.pivotColumn.text == 'cityName') {
				cellText = city;
			}

			return "<div style='width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;'>" + cellText + "</div>";
		};

		return (
			<JqxPivotGrid
				style={{ width: 800, height: 400 }}
				source={pivotDataSource}
				treeStyleRows={false}
				autoResize={false}
				multipleSelectionEnabled={true}
				cellsRenderer={customCellsRenderer}
			/>
		);

[HristoParticipant]

Hello hhm8152,

You could use the option of the DataAdapter to format date.
Please, take a look at this example:

let cellText = '';
if (pivotCell.pivotColumn.text == 'date') {
	let formattedDate = dataAdapter.formatDate(new Date(date), 'dd/MM/yyyy')
	cellText = formattedDate;
}

There you could set specific pattern.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts