Kendo UI’s Telerik grid is a feature-packed component that provides us with a ready–to-use grid out of the box. With a few lines of code we can display a grid with paging that supports ordering and filtering by column, etc.

Kendo UI’s grid look and behavior can be customized to the smallest detail, and in this post we´re going to see a couple of the details that make the resulting grid more user friendly.

Display the loading spinner when the grid is empty

Kendo UI’s grid implements a spinner that shows when data is loading; this way the user can clearly see that the grid is fetching data.

Some times, though, no spinner is displayed. This leaves the user facing an apparently empty grid: while the grid is actually busy fetching data, the look of the grid misleads the user into thinking that the data has been already fetched, and that no rows were returned.

Where is the data?
Uh? no records?

We will encounter this situation mainly in the initial load of the grid. If the initial loading of data is done quickly enough the disappearance of the loading spinner will go unnoticed.  However, networks low speed, busy databases, and other problems in the back-end may delay the initial load of the data enough time to be noticeable for the user. In those cases the no-show-act of the spinner is a problem.

Actually the spinner is there, the only problem is that when there is no data the height of the grid is so small that the spinner remains hidden: one could say it is spinning on the dark side of the moon: where nobody can see it, and where it is not much use to anybody.

We can change that by giving the grid a minimum height:

.k-grid-content {
    min-height: 100px;
}

With that we will make the grid heigh enough to display the spinner.
spinner is visible
When the data has finished loading the grid will automatically adjust to accommodate the received rows.
pupulated grid

Display a message when there is no data on the grid

To make things more clear for the end user, we can program the Kendo UI grid to display a message in the content if, after having fetched the data, the number of rows received is zero.

display a message when no records are returned

The code:

angular.module('formatDemo', ['kendo.directives'])
    .controller('demoCtrl', function ($scope) {
        $scope.mainGridOptions = {
            noRecords: {
                template: "No records available."
            },
            dataSource: {
                transport: {
                    read: {
                        type: "GET",
                        url:"http://localhost:49416/api/Students/GetStudents",
                    }
                },
                pageSize: 75,

            },
            columns: [{
                field: 'Name',
                title: 'Name'
            }, {
                field: 'Email',
                title: 'Email'
            },{
                field: 'City',
                title: 'City'
            }, {
                field: 'phone',
                title: 'Phone'
            }]
        };
    });

 

Notice the noRecords attribute in the previous fragment of code that we use to display the No records available.:

 noRecords: {
                template: "No records available."
            },

That’s all for today, thanks for reading. If you find this tutorial useful you can click in the “follow” button at the end of the post to be notified of new posts.

Advertisements