Transposed grid display

[atomicParticipant]

Hi,

I would like to have jgxChart and jgxGrid on one page. Data are read from json file. everything works fine, just I would like to transpose rows and columns when grid is displayed. Is there easy way of displaying rows as columns in jqxGrid. I am new to jquery so i am sorry if I am asking for something obvious or simple.

Thank you very much!

Here is my code:

<title id=’Description’>jqxChart Stacked Column Series Example</title>
<link rel=”stylesheet” href=”javascript/test/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”jquery/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxcore.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxdata.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxchart.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”javascript/test/jquery.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxbuttons.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxmenu.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxlistbox.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxgrid.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”javascript/test/jqxgrid.grouping.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
// prepare chart data as an array
var myURL =’test_json.php’;
var source =
{
url: myURL,
root: ‘data’,
datatype: ‘json’,
cache: false,

datafields: [
{ name: ‘year’, type: ‘string’ },
{ name: ‘Industry’, type: ‘number’ },
{ name: ‘Transport’, type: ‘number’ },
{ name: ‘Residential’, type: ‘number’ },
{ name: ‘Commercial’, type: ‘number’ },
]
};
var dataAdapter = new $.jqx.dataAdapter(source, {async: false, autoBind: true,});

dataAdapter.dataBind();

// prepare jqxChart settings
var settings = {
title: “Fitness & exercise weekly scorecard”,
description: “Time spent in vigorous exercise by activity”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘year’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 1,
gridLinesColor: ‘#888888’,
axisSize: ‘auto’
},
colorScheme: ‘scheme06’,
seriesGroups:
[
{
type: ‘stackedcolumn’,
columnsGapPercent: 100,
seriesGapPercent: 5,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
displayValueAxis: true,
description: ‘Time in minutes’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘Industry’, displayText: ‘Industry’ },
{ dataField: ‘Transport’, displayText: ‘Transport’ },
{ dataField: ‘Residential’, displayText: ‘Residential’ },
{ dataField: ‘Commercial’, displayText: ‘Commercial’ }
]
}
]
};
// setup the chart
$(‘#jqxChart’).jqxChart(settings);

$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
editable: true,
selectionmode: ‘singlecell’,

columns: [
{ text: ‘godine’, datafield: ‘year’, width: 80, columntype: ‘numberinput’, initeditor: function (row, cellvalue, editor)
{editor.jqxNumberInput({ decimalDigits: 0 });
}
},
{ text: ‘industrija’, datafield: ‘Industry’, width: 80, columntype: ‘numberinput’, initeditor: function (row, cellvalue, editor)
{editor.jqxNumberInput({ decimalDigits: 0 });
}
},
{ text: ‘transport’, datafield: ‘Transport’, width: 80, columntype: ‘numberinput’, initeditor: function (row, cellvalue, editor)
{editor.jqxNumberInput({ decimalDigits: 0 });
}
},
{ text: ‘kucanstvo’, datafield: ‘Residential’, width: 80, columntype: ‘numberinput’, initeditor: function (row, cellvalue, editor)
{editor.jqxNumberInput({ decimalDigits: 0 });
}
},
{ text: ‘komercijalni’, datafield: ‘Commercial’, width: 80, cellsalign: ‘right’, columntype: ‘numberinput’, initeditor: function (row, cellvalue, editor)
{editor.jqxNumberInput({ decimalDigits: 0 });
}
}
]
});
$(“#jqxgrid”).on(‘cellbeginedit’, function (event) {
var args = event.args;
$(“#cellbegineditevent”).text(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
$(“#jqxgrid”).on(‘cellendedit’, function (event) {
var args = event.args;
var sector = args.datafield;
var year = 1 + args.rowindex;
var value = args.value;
rowdata = new Object();
rowdata[‘action’] = ‘saveData’;
rowdata[‘year’] = year;
rowdata[‘sector’] = sector;
rowdata[‘value’] = value;

$.ajax({
url: myURL,
dataType: ‘json’,
type: ‘POST’,
data: rowdata,
complete: function (data) {
dataAdapter.dataBind();
$(‘#jqxChart’).jqxChart({source:dataAdapter, enableAnimations: false,});
}
});
});

});
</script>
<div id=’jqxChart’ style=”width:680px; height:400px;”></div>
<div id=”jqxgrid” style=”width:680px; height:400px;”></div>

[DimitarParticipant]

Hello atomic,

Please check out the demo Custom Row Editor which shows a transposed grid. We hope it is helpful to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[atomicParticipant]

Thank you Dimitar,
What I actually did is, I created new source (json data file) with transposed values and put it to grid.
Best

[Author]

Posts