Kendo Grid No Records message

I wish kendo grid has an option to say whether we want to display ‘No Records Found’ message in the grid if there are no records to display.

When I goggled about it I found the following stack-overflow link which gave a solution for an grid .

http://stackoverflow.com/questions/23476978/display-a-message-within-the-kendo-grid-when-its-empty

I extended(actually hacked) it further to make it general so that it can be used across web application and below is the demo

http://jsfiddle.net/chandarmk/kb689mxp/

Here is what I did

Grabbed all the kendo grids in a page by using $(‘.k-grid’) then looped through each kendo grid attaching an databound event handler. Event handler does the job of checking grid’s row count if it is zero then it insert a row in the grid. I got the event handler code from the stack-overflow and tweaked it to suit my needs.

The downside of this hack is that we need to have this script at the bottom of the page i.e. after all scripts or have it executed in the windows.settimeout like the above jsfiddle demo.

Here is the code

$(function() {
	function displayNoRecordsFound() {
		var grid = this;
		// Get the number of Columns in the grid
		var dataSource = grid.dataSource;
		var gridElement = grid.element;
		var colCount = gridElement.find('.k-grid-header colgroup > col').length;

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

		// Get visible row count
		var rowCount = gridElement.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 < dataSource._take) {
			var addRows = dataSource._take - rowCount;
			for (var i = 0; i < addRows; i++) {
				gridElement.find('.k-grid-content tbody').append('<tr class="kendo-data-row"><td>&nbsp;</td></tr>');
			}
		}
	}
	
	window.setTimeout(function() {
			$('.k-grid').each(function(e) {
			var grid = $(this).data('kendoGrid');
			grid.bind('dataBound', displayNoRecordsFound);
		});
	},1000);
	
});
Advertisements

About Thiru

I'm a full stack developer and have held roles in engineering & product. Contact details Email : chandarmk@yahoo.com / thiru@mavistech.com www.linkedin.com/in/thirumk website: mavistech.com W
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s