[Solved] Grid record count

[Lars]

Hello,

I am trying to get the record count of the grid using "grid.dataSource.total()", but it is always returning zero.

This is an AngularJS app with an itemDetailsDirective that is used to display detail about an item.  It is a pop-up window that contains a grid with inventory on-hand, etc. for the various locations.  However, when no locations have inventory, the grid is displayed with only the headers, which looks funny and I would like to only display the grid if there are records to display, and display some text like, "No inventory found for this item" instead of the grid when it is empty.

Here is the directive:

(function () {
    'use strict';
    angular.module('app').directive('itemDetails', itemDetailsDirective);

    function itemDetailsDirective() {
        return {
            restrict: 'E',
            scope: {
                itemNo: "@",
            },
            templateUrl: "/app/inventory/itemDetails.html",
            controller: function ($scope, $element) {
                console.log("itemDetailsDirective, controller: " + $scope.itemNo);

                $scope.$on('ShowDetails', function (event, itemNo) {
                    console.log("itemDetailsDirective, ShowDetails: " + itemNo);

                    $scope.itemNo = itemNo;
                    $scope.inventoryGridOptions = getInventoryGridOptions();
                    $scope.inventoryGrid.setDataSource(getGridDataSource(itemNo));
                    $scope.inventoryGrid.dataSource.read();
                    $scope.gridRecordCount = $scope.inventoryGrid.dataSource.total();
                    $scope.inventoryGrid.refresh();
                    $scope.itemDetailsWindow.center();
                    $scope.itemDetailsWindow.open();
                });

                $scope.onGridDataBound = function(e) {
                    if ($scope.inventoryGrid) {
                        $scope.gridRecordCount = $scope.inventoryGrid.dataSource.total();
                    }
                }

                $scope.close = function() {
                    $scope.itemDetailsWindow.close();
                }
            }
        };

        function getGridDataSource(itemNo) {
            console.log("itemDetailsDirective, getGridDataSource: " + itemNo);

            return new kendo.data.DataSource({
                type: "json",
                transport: {
                    read: {
                        url: "/api/Inventory/GetInventory?itemNo=" + itemNo,
                        type: "GET",
                        cache: false
                    }
                },
                sort: [{ field: "Loc", dir: "asc" }],
                pageSize: 10
            });
        }

        function getInventoryGridOptions() {
            return {
                scrollable: false,
                columns: [
                    {
                        field: "Loc", title: "Loc", width: 50,
                    },
                    {
                        field: "QtyOnHand", title: "Qty OnHand", width: 70, format: "{0:n0}", attributes: { style: "text-align:right" }
                    },
                    {
                        field: "QtyCom", title: "Qty Com", width: 50, format: "{0:n0}", attributes: { style: "text-align:right" }
                    },
                    {
                        field: "QtyBO", title: "Qty BO", width: 50, format: "{0:n0}", attributes: { style: "text-align:right" }
                    },
                    {
                        field: "QtyXfer", title: "Qty Xfer", width: 50, format: "{0:n0}", attributes: { style: "text-align:right" }
                    },
                    {
                        field: "QtyOrd", title: "Qty Ord", width: 50, format: "{0:n0}", attributes: { style: "text-align:right" }
                    }
                ]
            };
        };
    };
})();

How can I get the record count of the grid / data source?

Also, please let me know if you have other recommendations for displaying something alternate when the grid is empty.

Thanks,
Lars

[Alexander Valchev]

Hello Lars,

The problem with the total method occurs because it is executed before remote data is fetched from the server (the Ajax requests are asynchronous).
My recommendation is to hook up to the dataBound event of the Grid and check the total amount when the dataBound event fires. At that time you should receive correct results.

By design the "No records to display" message is shown within the Grid's pager. If you believe that this is not convenient for the user you may manually include a custom "no message to display" row. This help topic explains how to do this.

Regards,
Alexander Valchev
Telerik

 

 

[Lars]

Hello Alexander,

Ok, I'll give that a shot.

Thanks,
Lars

[Lars]

Hello Alexander,

I tried the solution suggested in the help topic:

function onGridDataBound(e) {
    if (!e.sender.dataSource.view().length) {
        var colspan = e.sender.thead.find("th:visible").length,
            emptyRow = '<tr><td colspan="' + colspan + '">... no records ...</td></tr>';
        e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);
    }
}

However, this threw off the layout of the grid (columns no longer filling the width of the grid + some other odd quirks in the look)

But it got me close enough, so with this minor change it works fine:

dataBound: function (e) {
   if (!e.sender.dataSource.view().length) {
        var colspan = e.sender.thead.find("th:visible").length;
        var emptyRow = "<tr><td colspan='" + colspan + "' style='text-align:center'>... No inventory found ...</td></tr>";
        e.sender.tbody.parent().end().html(emptyRow);
    }
}

I am just posting this back in case somebody else has the same issue.

Thanks,
Lars