Display Grid Row Count in status bar? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, getrows, grid, jquery grid, jqxgrid, number of rows, renderstatusbar, row count, statusbar

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

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

Author

Display Grid Row Count in status bar? Posts

August 28, 2015 at 7:26 pm Display Grid Row Count in status bar? #75278

realtek

Participant

Hi,

How can I display how many rows a grid has in its Status Bar?

I know you can normally do something like

var rowCount = $("jqxgrid").jqxGrid('getrows').length();

But I don’t think this will work because the grid has not loaded data at the time of the status bar being rendered?

Thanks

August 31, 2015 at 5:31 am Display Grid Row Count in status bar? #75293

Dimitar

Participant

Hi realtek,

The renderstatusbar callback is called after the grid has been loaded. Here is how to display the number of rows in the statusbar:

$("#jqxgrid").jqxGrid(
{
    width: 850,
    source: getAdapter(),
    showstatusbar: true,
    renderstatusbar: function (statusbar) {
        var rowCount = $("#jqxgrid").jqxGrid('getrows').length;
        statusbar.append('<div style="margin: 5px;">Rows count: ' + rowCount + '</div>');
    },
    columns: [
        { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
        { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
        { text: 'Product', datafield: 'productname', width: 170 },
        { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
        { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
        { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
});

Best Regards,
Dimitar

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

September 4, 2015 at 9:38 am Display Grid Row Count in status bar? #75487

realtek

Participant

Thank you Dimitar, how can I refresh this variable (or do it a different way) when the grid updates?

I tried specifying a empty div in the status bar and populating the .text() from the bindingcomplete event but whenever I do this it works but my toolbar disappears!

Thanks

September 4, 2015 at 10:17 am Display Grid Row Count in status bar? #75495

Dimitar

Participant

Hi realtek,

Please try the following code:

<!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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var getAdapter = function () {
                // prepare the data
                var data = generatedata(15);

                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'available', type: 'bool' }
                    ],
                    addrow: function (rowid, rowdata, position, commit) {
                        commit(true);
                        var rowCount = $("#jqxgrid").jqxGrid('getrows').length;
                        $('#rowsCountSpan').text(rowCount);
                    }
                };

                var dataAdapter = new $.jqx.dataAdapter(source);
                return dataAdapter;
            }

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: getAdapter(),
                showstatusbar: true,
                renderstatusbar: function (statusbar) {
                    var rowCount = $("#jqxgrid").jqxGrid('getrows').length;
                    statusbar.append('<div style="margin: 5px;">Rows count: <span id="rowsCountSpan">' + rowCount + '</span></div>');
                },
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
                  { text: 'Product', datafield: 'productname', width: 170 },
                  { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
                  { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

            $('#addRow').jqxButton().click(function () {
                $('#jqxgrid').jqxGrid('addrow', null, {});
            });

            $("#jqxgrid").on("bindingcomplete", function (event) {
                var rowCount = $("#jqxgrid").jqxGrid('getrows').length;
                $('#rowsCountSpan').text(rowCount);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <br />
    <button id="addRow">
        Add row</button>
</body>
</html>

Best Regards,
Dimitar

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

September 4, 2015 at 12:50 pm Display Grid Row Count in status bar? #75507

realtek

Participant

Thank you Dimitar, perfect!

Author

Posts

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

You must be logged in to reply to this topic.