Column Group - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: column group, columngroup, columngroups, comma, grid, hierarchy, jqxgrid, style, syntax

This topic contains 3 replies, has 2 voices, and was last updated by Al 10 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Column Group Posts
December 9, 2014 at 4:19 am Column Group #63926

Al
Participant

I am having trouble using column groups. Below is a small piece of working code and input file. When I uncomment the section that introduces column groups it gives an error saying “style” of undefined cannot be determined. Please advice. thanks,

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Grid Test</title>
<link rel=”stylesheet” href=”./JQ/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”./JQ/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxchart.rangeselector.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxslider.js”></script>
<script type=”text/javascript” src=”./JQ/jqwidgets/jqxbuttons.js”></script>

<script type=”text/javascript”>
$(document).ready(function() {
/**************** Grid related anonymous function *******************/
(function() {
var url = “./Positions.xml”;
// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘Symbol’, type: ‘string’ },
{ name: ‘Size’, type: ‘int’ },
{ name: ‘AvgPx’, type: ‘float’ },
{ name: ‘PnLR’, type: ‘float’ },
{ name: ‘PnLU’, type: ‘float’ },
{ name: ‘TimeStamp’, type: ‘date’, format: “HH:mm:ss” }
],
root: “Positions”,
record: “Position”,
id: ‘PositionID’,
url: url
};

var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function(xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });

function createGrid(data) {
// initialize jqxGrid
$(“#jqxgridPositions”).jqxGrid(
{
width: 635,
source: data,
pageable: false,
autoheight: true,
sortable: false,
altrows: true,
enabletooltips: false,
editable: false,
selectionmode: ‘none’,
columns: [
{ text: ‘Symbol’, datafield: ‘Symbol’, width: 80 },
{ text: ‘Size’, datafield: ‘Size’, cellsalign: ‘right’, align: ‘right’, width: 100 },

{ text: ‘AvgPx’, datafield: ‘AvgPx’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘PnL U’, datafield: ‘PnLU’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘PnL R’, datafield: ‘PnLR’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘Time Stamp’, datafield: ‘TimeStamp’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘HH:mm:ss.fff’, width: 155 }

/*
{ text: ‘Symbol’, columngroup: ‘Pos’, datafield: ‘Symbol’, width: 80 },
{ text: ‘Size’, columngroup: ‘Pos’, datafield: ‘Size’, cellsalign: ‘right’, align: ‘right’, width: 100 },
{ text: ‘AvgPx’, columngroup: ‘Analytics’, datafield: ‘AvgPx’, cellsalign: ‘right’, align: ‘right’, width: 100 },
{ text: ‘PnL U’, columngroup: ‘Analytics’, datafield: ‘PnLU’, cellsalign: ‘right’, align: ‘right’, width: 100 },
{ text: ‘PnL R’, columngroup: ‘Analytics’, datafield: ‘PnLR’, cellsalign: ‘right’, align: ‘right’, width: 100 }
{ text: ‘Time Stamp’, columngroup: ‘Analytics’, datafield: ‘TimeStamp’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘HH:mm:ss.fff’, width: 155 }
*/
],
columngroups: [
{ text: ‘Pos’, align: ‘center’, name: ‘Pos’ },
{ text: ‘Analytics’, align: ‘center’, name: ‘Analytics’ }
]
});
};

createGrid(dataAdapter);
var ttimer = setInterval(updateRow, 10000);

function updateRow() {
var rows = $(“#jqxgridPositions”).jqxGrid(“getrows”);
var row = rows[0];
row.PnLR = 12345;
row.AvgPx = 1534;
row.Size = 13;
row.TimeStamp = new Date();
$(“#jqxgridPositions”).jqxGrid(“getInstance”).refreshdata();
}

})();
/**************** END —-Grid related anonymous function *******************/
});
</script>
</head>
<body>
<h1>Dealer Positioning</h1>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgridPositions”>
</div>
</div>
</body>
</html>

Input file (Positions.xml):

<Positions>
<Position PositionID=”1″>
<Symbol>ESZ4</Symbol>
<Size>100</Size>
<AvgPx>1990.50</AvgPx>
<PnLR>2000</PnLR>
<PnLU>3000</PnLU>
<TimeStamp>13:09:16</TimeStamp>
</Position>
</Positions>

December 9, 2014 at 7:24 am Column Group #63935

Dimitar
Participant

Hello Al,

The commented code has a syntax error – there has to be a comma after the definition of the column “PnL R”. Maybe this is what causes the issue. Remember to put a comma after “Time Stamp”, too after you uncomment.

Best Regards,
Dimitar

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

December 9, 2014 at 6:52 pm Column Group #63976

Al
Participant

Dimitar,

Thanks for your response. The typo was actually a cut and paste error in the form. In order to illustrate the problem further I tried to simplify the code and came across another problem in addition to the original one. I have posted it on jsFiddle:

http://jsfiddle.net/almerchant/pdt83j74/3/

Here I am setting the data source to an array of objects but i get an error as you can see. + the original error still exists. Please advice.

December 9, 2014 at 8:21 pm Column Group #63981

Al
Participant

Dimitar,

I was setting the data incorrectly. when i do it through the data adapter it works!

http://jsfiddle.net/almerchant/pdt83j74/10/

thanks,
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.