jQuery UI Widgets Forums Grid Column Group

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Column Group Posts
  • 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>

    • This topic was modified 9 years, 2 months ago by  Al.
    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/

    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.

    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,

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

You must be logged in to reply to this topic.