In this post I will continue my quest to Hack the Kendoui Grid in order to bend it to my will to do the things I feel it should already do but does not.  If this is your first time to my site I’ve already written up guides to perform the following:

In this Article were going to set the grid up so that if it’s datasource returns 0 Results it will give us a message in the grid indicating there were no results found.  Kendo’s default functionality is to show a collapsed empty grid – which I have received feed back from my users as unacceptable and I tend to agree.  Also as an aside (or bonus) to this project we will also make the grid stop collapsing when there are fewer results than the page is set to display.  This will result in the Grid maintaining it’s height on the page even when you don’t have a full page.

To begin we will set up a controller action that give us no results:

        public JsonResult GetData()
        {
            var people = new List<Person>();
            return Json(people, JsonRequestBehavior.AllowGet);
        }

This will return us nothing

.

And we will create our html page to call this service that initially will look like this:

<script type="text/javascript">
    $(function () {
        var gridDataSource = new kendo.data.DataSource({
            transport: {
                read: '/KendoGrid/GetData'
            },
            pageSize: 5
        });

        var grid = $("#kGrid").kendoGrid({
            dataSource: gridDataSource,
            columns: [
                { field: "LastName", title: "Last Name", filterable: true, sortable: true, width: 300 },
                { field: "FirstName", filterable: true, sortable: true }
            ]
        });
    });
</script>

<div id="kGrid"></div>

Running this page give us the following:

image

So now we want the grid to let us know there’s nothing in there.  To do this we are going to do the following:

  • Get the number of columns in our grid (we will need this for our colspan of the TD)
  • Check the length of the current view set returned to the grid
  • If it’s 0 were going to add in a new row to kgrid content section of the grid

The following code demonstrates the above steps

        var grid = $("#kGrid").kendoGrid({
            ...
            dataBound: function () {
                //Get the number of Columns in the grid
                var colCount = $("#kGrid").find('.k-grid-header colgroup > col').length;

                //If There are no results place an indicator row
                if (gridDataSource._view.length == 0) {
                    $("#kGrid").find('.k-grid-content tbody')
                        .append('<tr class="kendo-data-row"><td colspan="' +
                            colCount +
                            '" style="text-align:center"><b>No Results Found!</b></td></tr>');
                }
            }
            }
        });

And now if we refresh our page we see the following:

image

That was pretty easy right.  Now our second requirement is that we want the grid to have a full page worth of rows.  To accomplish this were going to perform the following steps:

  • Determine the current number of visible rows in the grid.
  • If the row count is less that the page size add in the number of missing rows.
        var grid = $("#kGrid").kendoGrid({
            ...
            databound: function () {
                ...

                //Get visible row count
                var rowCount = $("#kGrid").find('.k-grid-content tbody tr').length;

                //If the row count is less that the page size add in the number of missing rows
                if (rowCount < gridDataSource._take) {
                    var addRows = gridDataSource._take - rowCount;
                    for (var i = 0; i < addRows; i++) {
                        $("#kGrid").find('.k-grid-content tbody')
                            .append('<tr class="kendo-data-row"><td>&nbsp;</td></tr>');
                    }
                }            

            }
        });

As you can see we just add in blank rows to fill out the page.  Running the page now gives us the following:

image

Also an added benefit is if we have fewer items than the page calls for we still get a grid that’s the correct height.

image

And with that our little exercise is done.  Here is a final copy of the code:

Final Code:

<script type="text/javascript">
    $(function () {
        var gridDataSource = new kendo.data.DataSource({
            transport: {
                read: '/KendoGrid/GetData'
            },
            pageSize: 5
        });

        var grid = $("#kGrid").kendoGrid({
            dataSource: gridDataSource,
            columns: [
                { field: "LastName", title: "Last Name", filterable: true, sortable: true, width: 300 },
                { field: "FirstName", filterable: true, sortable: true }
            ],
            dataBound: function () {
                //Get the number of Columns in the grid
                var colCount = $("#kGrid").find('.k-grid-header colgroup > col').length;

                //If There are no results place an indicator row
                if (gridDataSource._view.length == 0) {
                    $("#kGrid").find('.k-grid-content tbody')
                        .append('<tr class="kendo-data-row"><td colspan="' +
                            colCount +
                            '" style="text-align:center"><b>No Results Found!</b></td></tr>');
                }

                //Get visible row count
                var rowCount = $("#kGrid").find('.k-grid-content tbody tr').length;

                //If the row count is less that the page size add in the number of missing rows
                if (rowCount < gridDataSource._take) {
                    var addRows = gridDataSource._take - rowCount;
                    for (var i = 0; i < addRows; i++) {
                        $("#kGrid").find('.k-grid-content tbody')
                            .append('<tr class="kendo-data-row"><td>&nbsp;</td></tr>');
                    }
                }
            }
        });
    });
</script>

<div id="kGrid"></div>

I hope you have found this little walk through helpful.  If you have any questions or comments, please do not hesitate to send them my way or post them here.

Tagged with →  
Share →

One Response to Adding “No Results Found” to the KendoUI Grid

  1. iawebdev says:

    Hey, good post. Regarding the “No Records” message: there’s no need to find out the number of columns. You can just do colspan=”0″>. From http://www.w3.org/TR/html4/struct/tables.html#adef-colspan:
    colspan = number [CN]
    This attribute specifies the number of columns spanned by the current cell. The default value of this attribute is one (“1″). The value zero (“0″) means that the cell spans all columns from the current column to the last column of the column group (COLGROUP) in which the cell is defined.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>