error: jqxGrid: The data is still loading & other questions

[lucasgrafParticipant]

First, I have a grid and on page ready I call the function seen below w/some default parameters to load the initial data. This works great. Now, I also have some radio buttons & checkboxes that when changed will call this function again to reload the data with different data depending on the options they select. When that happens I get the “error….The data is still loading” error. Also, on the second (and any additional) loads of the data, in addition to that error the ‘bindingcomplete’ event gets thrown twice. What do I need to do differently to avoid this error?

Second, Why is there no way to format an entire rows CSS instead of the cell by cell method that is the only option now? I have a grid that has 2800 rows * 15 cells and so I have to call the function 42,000 times to format each cell instead of just 2800 times if we had a way to just format the entire row.

Here is the function I use to populate the grid.

function UpdateMachinesGrid(rdoType, selectedPool, selectedProfilingValues, bShowDeleted, bshow24hours, bshowredmachine)
    {

        $('#jqGridMachines').jqxGrid('clear');
        rowCSS = new Array();

        var urlParameters = '?machineType=' + rdoType + '&selectedPool=' + selectedPool + '&selectedProfilingValues=' + selectedProfilingValues + '&bShowDeleted=' + bShowDeleted + '&bShow24Hours=' + bshow24hours + '&bShwoRedMachines=' + bshowredmachine;

        source =
                {
                    datatype: "xml",
                    datafields: [
                    { name: 'Id' },
                    { name: 'Name' },
                    { name: 'IpAddress' },
                    { name: 'GpuFamily' },
                    { name: 'GpuMarketingName' },
                    { name: 'GpuBoardNubmer' },
                    { name: 'GpuSku' },
                    { name: 'CurrentOs' },
                    { name: 'AvailableOs' },
                    { name: 'HeartbeatAsString',},
                    { name: 'SliCapable' },
                    { name: 'Status' },
                    { name: 'Driver' },
                    { name: 'Location' },
                    { name: 'Minutes' },
                    { name: 'Enabled' },
                    { name: 'IsFavoriteIcon' }
                    ],
                    record: 'MachineViewData',                    
                    url: 'Machines_GridData.aspx/GetMachines' + urlParameters
                };

        var dataAdapter = new $.jqx.dataAdapter(source, { contentType: 'application/json; charset=utf-8' });

        $("#jqGridMachines").jqxGrid({
            source: dataAdapter,           
            theme: 'energyblue',
            sortable: true,
            filterable: true,
            columnsresize: true,
            selectionmode: 'multiplerowsextended',
            enabletooltips: true,
            groupable: true,
            columnsreorder: true,
            height: '100%',
            width: '100%',
            columns: [
                    { text: 'Id', dataField: 'Id', name: 'Id', width: 100 },
                    { text: '', dataField: 'IsFavoriteIcon', width: 60, cellsrenderer: faviconrenderer, pinned: true, resizable: false },
                    { text: '', width: 60, cellsrenderer: vnciconrenderer, pinned: true, resizable: false },
                    { text: 'Name', dataField: 'Name', name: 'Name', width: 120, pinned: true, cellclassname: cellconditioncheck },
                    { text: 'IP Address', dataField: 'IpAddress', name: 'IpAddress', width: 300, cellclassname: cellconditioncheck },
                    { text: 'GPU Family', dataField: 'GpuFamily', name: 'GpuFamily', width: 100, cellclassname: cellconditioncheck },
                    { text: 'GPU Mktg. Name', dataField: 'GpuMarketingName', name: 'GpuMarketingName', width: 120, cellclassname: cellconditioncheck },
                    { text: 'GPU Board #', dataField: 'GpuBoardNubmer', name: 'GpuBoardNubmer', width: 120, cellclassname: cellconditioncheck },
                    { text: 'GPU SKU', dataField: 'GpuSku', name: 'GpuSku', width: 120, cellclassname: cellconditioncheck },
                    { text: 'Current OS', dataField: 'CurrentOs', name: 'CurrentOs', width: 200, cellclassname: cellconditioncheck },
                    { text: 'Available OS', dataField: 'AvailableOs', name: 'AvailableOs', cellclassname: cellconditioncheck },
                    { text: 'Heartbeat', dataField: 'HeartbeatAsString', name: 'Heartbeat', cellclassname: cellconditioncheck },
                    { text: 'SLI?', dataField: 'SliCapable', name: 'SliCapable', cellclassname: cellconditioncheck },
                    { text: 'Status', dataField: 'Status', name: 'Status', cellclassname: cellconditioncheck },
                    { text: 'Driver', dataField: 'Driver', name: 'Driver', cellclassname: cellconditioncheck },
                    { text: 'Location', dataField: 'Location', name: 'Location', cellclassname: cellconditioncheck },
                    { text: 'Minutes', dataField: 'Minutes', name: 'Minutes', cellclassname: cellconditioncheck },
                    { text: 'Enabled', dataField: 'Enabled', name: 'Enabled', cellclassname: cellconditioncheck },
                ]
        });
        
    }

[lucasgrafParticipant]

One type-o -> “2800 rows * 15 cells” should be “2800 rows * 15 columns”

[DimitarParticipant]

Hello lucasgraf,

1) You should call the grid initialization code only once. Afterwards, you can try calling only the following code:

function UpdateMachinesGrid(rdoType, selectedPool, selectedProfilingValues, bShowDeleted, bshow24hours, bshowredmachine) {
    var urlParameters = '?machineType=' + rdoType + '&selectedPool=' + selectedPool + '&selectedProfilingValues=' + selectedProfilingValues + '&bShowDeleted=' + bShowDeleted + '&bShow24Hours=' + bshow24hours + '&bShwoRedMachines=' + bshowredmachine;
    source.url = 'Machines_GridData.aspx/GetMachines' + urlParameters;
    dataAdapter.dataBind();
    $("#jqGridMachines").jqxGrid("updatebounddata");
}

We also suggest that the initial code is called in $(document).ready() so that source and dataAdapter are accessible from UpdateMachinesGrid.

2) Rows can be formatted only by cell to allow users to format the entire row or selected columns only.

Best Regards,
Dimitar

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

[lucasgrafParticipant]

Dimitar,

Thank you, that fixed my issue with the loading!

As far as the row css formatting has it ever been thought of to offer both entire row and cell by cell formatting? Going cell by cell when somebody really wants to format and entire row just based off one cells value is pretty inefficient and makes the grid loading slow.

We are moving from the componentart grid to the jqwidgets and while the componentart grid was terrible at pretty much everything they did have a good custom formatting for both rows and cells. Like if I wanted to set a row css based on conditions I could just do this….

 <ConditionalFormats>
                <ComponentArt:GridConditionalFormat ClientFilter="DataItem.GetMember('Minutes').Value <= 120" RowCssClass="NormalRow" SelectedRowCssClass="SelectedRow" />
                <ComponentArt:GridConditionalFormat ClientFilter="DataItem.GetMember('Minutes').Value > 120 && DataItem.GetMember('Minutes').Value <= (60 * 24)" RowCssClass="NoHeartbeatRow" SelectedRowCssClass="SelectedRow" />
                <ComponentArt:GridConditionalFormat ClientFilter="DataItem.GetMember('Minutes').Value > (60 * 24)" RowCssClass="GrayedRow" SelectedRowCssClass="SelectedRow" />
                <ComponentArt:GridConditionalFormat ClientFilter="DataItem.GetMember('Enabled').Value == false" RowCssClass="DeletedRow" SelectedRowCssClass="SelectedRow" />
            </ConditionalFormats>

I could then set all 2800 rows in my grid to a specific CSS based on those conditions and it was super fast. Like I said, with the jqwidgets grid having to go cell by cell on 2800 rows w/15 columns is pretty slow & inefficient.

Is there a way to format the cells only as they become visible? I tried using deferred scrolling but it still seems to run the cell format function for the entire grid on load.

[DimitarParticipant]

Hi lucasgraf,

The cellsrenderer callback is called only for cells that are currently rendered (visible). It is not called for the entire grid. Here is an example that counts how many times cellsrenderer has been called:

<!DOCTYPE html>
<html lang="en">
<head>
    <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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };

            var counter = 0;

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                counter++;
                $("#log").html("Cellsrender called " + counter + " times.");
            }

            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                height: 200,
                source: dataAdapter,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', cellsrenderer: cellsrenderer, width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', cellsrenderer: cellsrenderer, width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', cellsrenderer: cellsrenderer, width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', cellsrenderer: cellsrenderer }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="log">
        </div>
    </div>
</body>
</html>

Please also do not post information about third-party component libraries as it is against forum policy.

Best Regards,
Dimitar

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

[Author]

Posts