This is a migrated thread and some comments may be shown as answers.

Empty grid / NoRecords template

10 Answers 1529 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Joel asked on 12 Jan 2012, 06:55 AM
Is there any sort of a provision for this in the grid? (similar to here : http://www.telerik.com/help/aspnet/grid/grdnorecordstemplate.html)

10 Answers, 1 is accepted

Sort by
0
Amol
Top achievements
Rank 1
answered on 25 Jan 2012, 07:00 AM
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 .
...
0
Joel
Top achievements
Rank 1
answered on 27 Jan 2012, 03:00 AM
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
0
Brian Vallelunga
Top achievements
Rank 1
answered on 01 Feb 2012, 07:52 PM
I'd also like this feature.
0
Josh
Top achievements
Rank 1
answered on 02 Mar 2012, 11:12 PM
+1 on this feature!
0
Andre
Top achievements
Rank 1
answered on 07 Mar 2012, 11:54 AM
+1
0
Paweł
Top achievements
Rank 1
answered on 08 Mar 2012, 09:51 AM
+1
0
Paweł
Top achievements
Rank 2
answered on 20 Mar 2012, 02:35 PM
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
    }
    // (...)
});
0
Kiran
Top achievements
Rank 1
answered on 26 Aug 2012, 03:05 PM
Thank you Pawel for providing a simple solution.
0
Paweł
Top achievements
Rank 1
answered on 28 Aug 2012, 08:20 AM
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>')
0
atul
Top achievements
Rank 1
answered on 18 Oct 2012, 03:11 AM
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>

Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Answers by
Amol
Top achievements
Rank 1
Joel
Top achievements
Rank 1
Brian Vallelunga
Top achievements
Rank 1
Josh
Top achievements
Rank 1
Andre
Top achievements
Rank 1
Paweł
Top achievements
Rank 1
Paweł
Top achievements
Rank 2
Kiran
Top achievements
Rank 1
atul
Top achievements
Rank 1
Share this question
or