jQWidgets Forums

Tagged: column group related error while rendering

This topic contains 4 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 3 months ago.

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

Author

Error rendering when Column Groups present in jqcore line 7 Posts
February 20, 2015 at 5:27 am Error rendering when Column Groups present in jqcore line 7 #67391

Al
Participant

I get an error when I use column groups but the error disappears when I comment out the column groups. The error says ” cannot get style of undefined” in jqcore line 7. I will appreciate any pointers. Here is the code:

(function () {
var data = [
{
Symbol: ‘ESH5′,
Bid: 2015,
Ask: 2015,
Open: 2015,
High: 2015,
Low: 2015,
OFI: 0,
TFI: 0,
DPI: 0,
FlowCode: ”,
Volume: 0,
AvgPaid: 0,
AvfGiven:0,
TimeStamp: ’00:00:00’
}];

var source =
{
datatype: “json”,
datafields: [
{ name: ‘Symbol’, type: ‘string’ },
{ name: ‘Bid’, type: ‘float’ },
{ name: ‘Ask’, type: ‘float’ },
{ name: ‘Open’, type: ‘float’ },
{ name: ‘High’, type: ‘float’ },
{ name: ‘Low’, type: ‘float’ },
{ name: ‘OFI’, type: ‘int’ },
{ name: ‘TFI’, type: ‘int’ },
{ name: ‘DPI’, type: ‘int’ },
{ name: ‘FlowCode’, type: ‘string’ },
{ name: ‘Volume’, type: ‘int’ },
{ name: ‘AvgPaid’, type: ‘float’ },
{ name: ‘AvgGiven’, type: ‘float’ },
{ name: ‘TimeStamp’, type: ‘date’, format: “HH:mm:ss” }

],
localdata: data
};

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (value < 20) {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + value + ‘</span>’;
}
else {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #008000;”>’ + value + ‘</span>’;
}
}

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

/* doesn’t work for some reason!
var columnDefinitions = [
{ text: ‘Symbol’, datafield: ‘Symbol’, width: 80 },
{ text: ‘Bid’, columngroup: ‘Price’, datafield: ‘Bid’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘Ask’, columngroup: ‘Price’, datafield: ‘Ask’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘Open’, columngroup: ‘Price’, datafield: ‘Open’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘High’, columngroup: ‘Price’, datafield: ‘High’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘Low’, columngroup: ‘Price’, datafield: ‘Low’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘OFI’, columngroup: ‘Analytics’, datafield: ‘OFI’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘TFI’, columngroup: ‘Analytics’, datafield: ‘TFI’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘DPI’, columngroup: ‘Analytics’, datafield: ‘DPI’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘Flow Code’, columngroup: ‘Analytics’, datafield: ‘FlowCode’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 325 },
{ text: ‘Volume’, columngroup: ‘Analytics’, datafield: ‘Volume’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘Pd Sz’, columngroup: ‘Analytics’, datafield: ‘AvgPaid’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 75 },
{ text: ‘Gn Sz’, columngroup: ‘Analytics’, datafield: ‘AvgGiven’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 75 },
{ text: ‘Time Stamp’, columngroup: ‘Analytics’, datafield: ‘TimeStamp’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘HH:mm:ss.fff’, width: 105 }
];

var columnGroups = [
{ text: ‘Price’, align: ‘center’, name: ‘Price’ },
{ text: ‘Analytics’, align: ‘center’, name: ‘Analytics’ }
];
*/

var columnDefinitions = [
{ text: ‘Symbol’, datafield: ‘Symbol’, width: 80 },
{ text: ‘Bid’, datafield: ‘Bid’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘Ask’, datafield: ‘Ask’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘Open’, datafield: ‘Open’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘High’, datafield: ‘High’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘Low’, datafield: ‘Low’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 100 },
{ text: ‘OFI’, datafield: ‘OFI’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘TFI’, datafield: ‘TFI’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘DPI’, datafield: ‘DPI’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘Flow Code’, datafield: ‘FlowCode’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 325 },
{ text: ‘Volume’, datafield: ‘Volume’, cellsalign: ‘right’, align: ‘right’, cellsrenderer: cellsrenderer, width: 100 },
{ text: ‘Pd Sz’, datafield: ‘AvgPaid’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 75 },
{ text: ‘Gn Sz’, datafield: ‘AvgGiven’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘d2’, width: 75 },
{ text: ‘Time Stamp’, datafield: ‘TimeStamp’, cellsalign: ‘right’, align: ‘right’, cellsformat: ‘HH:mm:ss.fff’, width: 105 }
];

var settings =
{
width: 1560,
source: dataAdapter,
pageable: false,
autoheight: true,
sortable: false,
altrows: true,
enabletooltips: false,
editable: false,
selectionmode: ‘none’,
columns: columnDefinitions
//columngroups: columnGroups
};
// initialize jqxGrid
$(“#jqxgridFlowStats”).jqxGrid(settings);
pageData.flowStatsJQE = $(‘#jqxgridFlowStats’).jqxGrid(‘getInstance’);
pageData.flowStats = $(“#jqxgridFlowStats”).jqxGrid(“getrows”);

})();

February 20, 2015 at 6:46 am Error rendering when Column Groups present in jqcore line 7 #67397
Peter Stoev
Keymaster
Hi Al,

There is no issue with the current version of jQWidgets. Example based on your code below:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Basic grouping Grid showing collapsible data groups that can
        be customized via the 'Group By' header menu option or via drag and drop of grid
        column headers.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
           {
               Symbol: 'ESH5',
               Bid: 2015,
               Ask: 2015,
               Open: 2015,
               High: 2015,
               Low: 2015,
               OFI: 0,
               TFI: 0,
               DPI: 0,
               FlowCode: '',
               Volume: 0,
               AvgPaid: 0,
               AvfGiven:0,
               TimeStamp: '00:00:00'
           }];

            var source =
            {
                datatype: "json",
                datafields: [
                { name: 'Symbol', type: 'string' },
                { name: 'Bid', type: 'float' },
                { name: 'Ask', type: 'float' },
                { name: 'Open', type: 'float' },
                { name: 'High', type: 'float' },
                { name: 'Low', type: 'float' },
                { name: 'OFI', type: 'int' },
                { name: 'TFI', type: 'int' },
                { name: 'DPI', type: 'int' },
                { name: 'FlowCode', type: 'string' },
                { name: 'Volume', type: 'int' },
                { name: 'AvgPaid', type: 'float' },
                { name: 'AvgGiven', type: 'float' },
                { name: 'TimeStamp', type: 'date', format: "HH:mm:ss" }

                ],
                localdata: data
            };

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }

            var dataAdapter = new $.jqx.dataAdapter(source, {
                async: false, autoBind: true, loadComplete: function (d) {
                }
                });

            //doesn’t work for some reason!
            var columnDefinitions = [
            { text: 'Symbol', datafield: 'Symbol', width: 80 },
            { text: 'Bid', columngroup: 'Price', datafield: 'Bid', cellsalign: 'right', align: 'right', cellsformat: 'd2', width: 100 },
            { text: 'Ask', columngroup: 'Price', datafield: 'Ask', cellsalign: 'right', align: 'right', cellsformat: 'd2', width: 100 },
            { text: 'Open', columngroup: 'Price', datafield: 'Open', cellsalign: 'right', align: 'right', cellsformat: 'd2', width: 100 },
            { text: 'High', columngroup: 'Price', datafield: 'High', cellsalign: 'right', align: 'right', cellsformat: 'd2', width: 100 },
            { text: 'Low', columngroup: 'Price', datafield: 'Low', cellsalign: 'right', align: 'right', cellsformat: 'd2', width: 100 },
            { text: 'OFI', columngroup: 'Analytics', datafield: 'OFI', cellsalign: 'right', align: 'right', cellsrenderer: cellsrenderer, width: 100 },
            { text: 'TFI', columngroup: 'Analytics', datafield: 'TFI', cellsalign: 'right', align: 'right', cellsrenderer: cellsrenderer, width: 100 },
            { text: 'DPI', columngroup: 'Analytics', datafield: 'DPI', cellsalign: 'right', align: 'right', cellsrenderer: cellsrenderer, width: 100 },
            { text: 'Flow Code', columngroup: 'Analytics', datafield: 'FlowCode', cellsalign: 'right', align: 'right', cellsrenderer: cellsrenderer, width: 325 },
            { text: 'Volume', columngroup: 'Analytics', datafield: 'Volume', cellsalign: 'right', align: 'right', cellsrenderer: cellsrenderer, width: 100 },
            { text: 'Pd Sz', columngroup: 'Analytics', datafield: 'AvgPaid', cellsalign: 'right', align: 'right', cellsformat: 'd2', width: 75 },
            { text: 'Gn Sz', columngroup: 'Analytics', datafield: 'AvgGiven', cellsalign: 'right', align: 'right', cellsformat: 'd2', width: 75 },
            { text: 'Time Stamp', columngroup: 'Analytics', datafield: 'TimeStamp', cellsalign: 'right', align: 'right', cellsformat: 'HH:mm:ss.fff', width: 105 }
            ];
            
            var columnGroups = [
            { text: 'Price', align: 'center', name: 'Price' },
            { text: 'Analytics', align: 'center', name: 'Analytics' }
            ];
            

            var settings =
                        {
                            width: 1560,
                            source: dataAdapter,
                            pageable: false,
                            autoheight: true,
                            sortable: false,
                            altrows: true,
                            enabletooltips: false,
                            editable: false,
                            selectionmode: 'none',
                            columns: columnDefinitions,
                            columngroups: columnGroups
                        };
            // initialize jqxGrid
            $("#jqxgridFlowStats").jqxGrid(settings);
          //  pageData.flowStatsJQE = $('#jqxgridFlowStats').jqxGrid('getInstance');
         //   pageData.flowStats = $("#jqxgridFlowStats").jqxGrid('getrows');
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgridFlowStats"></div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
February 20, 2015 at 2:12 pm Error rendering when Column Groups present in jqcore line 7 #67422

Al
Participant

Peter,

Maybe I have an older version. I will update and let you know Regards,

February 20, 2015 at 4:53 pm Error rendering when Column Groups present in jqcore line 7 #67428

Al
Participant

Peter,

I downloaded version 3.7 and tried. I face the same issue:

Uncaught TypeError: Cannot read property ‘style’ of undefined
jqxgrid.js:7 Uncaught TypeError: Cannot read property ‘style’ of undefined

note that the error occurs when I try to update the grid. In this case I am doing it from a real time feed using signalR, so its hard for me to post the entire code.

IMPORTANTLY, the issue disappears when I remove the column groups.

This is definitely an issue since I have faced it earlier too. Visually, the column group headings borders disappear on the first update and the row is never updated.

I will be happy to debug as well if you point me to the code and where to put the breakpoints etc. I am pretty certain the data is clean and moreover it works without the column headings anyway.

I appreciate your attention.

February 23, 2015 at 8:40 am Error rendering when Column Groups present in jqcore line 7 #67481

Peter Stoev
Keymaster

Hi Al,

I sent you a working code based on the provided and it 100% works. There is nothing I can do more about this.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.