Empty grid / NoRecords template

[Joel]

Is there any sort of a provision for this in the grid? (similar to here : http://www.telerik.com/help/aspnet/grid/grdnorecordstemplate.html)

[Amol]

Is there any way to do this? Can we create an empty dataSource and use it? Is there any work around?
Edit : if you use an local json with only column names and empty values it works but not with transport. Only if you directly put the json in datasource like 'data: yourjson'. I dont know how  update, delete and insert  will work .
...

[Joel]

No good way to do this right now other than check if

dataSource.total() == 0

on the grid's databound and then insert a row (tr + td(s), if you prefer direct dom manipulation) into the grid with the desired markup & message.

Joel

[Brian Vallelunga]

I'd also like this feature.

[Josh]

+1 on this feature!

[Andre]

+1

[Paweł]

+1

[Paweł]

I just made workaround, it might be useful for any of You.

1. Global function for all grids:

function emptyGridFix() {

    if (this.total() > 0) return; // continue only for empty grid

    var msg = this.options.emptyMsg;

    if (!msg) msg = 'No records to display'; // Default message

    $(this.options.table).parent().html('<div class="empty-grid">' + msg + '</div>')

}

2. Css

.empty-grid

{

    color: #888;

    background: #eee;

    height: 100%;

    text-align: center;

    line-height: 100px;

}

3. Usage

$('#someGrid').kendoGrid({

    dataSource: {

        type: "json",

        transport: {

            read: 'http://example.com/path'

        },

        emptyMsg: 'This grid is empty', // This is optional

        change: emptyGridFix

    }

    // (...)

});

[Kiran]

Thank you Pawel for providing a simple solution.

[Paweł]

Actually this code breaks newest kendo release (2012.2.710):

$(this.options.table).parent().html('<div class="empty-grid">' + msg + '</div>')

and should be replaced by append:

$(this.options.table).parent().append('<div class="empty-grid">' + msg + '</div>')

[atul]

For others code mentioned above lack some functionality like if you found some record you still get the no record found message in the grid so i have just implemented this functionlaity which works fine and look fine as well and message get displayed at the right spot not under the paging footer. So just follow below mentioned step and you will get the nice sleak no record template looks in your kendo grid.


Add this code in your kendo grid within DataDource brackets:-
.Events(e => e.Change("OnGridChange"))
<script type="text/javascript">

function OnGridChange(){

if(this.total>0){
    $(this.options.table).find('.noRecord').remove();
    return;
}
else{
    var mgs = 'No record found';
    if($(this.options.table).find('.noRecord').html() == null ){
        $(this.options.table).append('<td colspan="3" class="noRecord>' + msg + '</td>')
        //set the colspan according to columns number you are displaying. for example if u are displaying 2 columns then set it to 3
    }
}
</script>

<style type="text/css">
.noRecord
{
    font-weight:bold;
}
</style>