I'm going to share the code sample for display "No Results Found" messages. If there are no any records [Empty grid / No Records template] in the result set.
If Empty Grid or No-Records are available in the Kendo ui mvc grid that time by default display "no items display" in the right bottom.
Table of Contents
1. MVC Kendo UI Services Grid
2. JavaScript code
In the 1st step, code sample for mvc kendo grid, the id of this grid is Services as given below.
In the 2nd step, javascript code sample for the display "No Results Found" as given below..
If Empty Grid or No-Records are available in the Kendo ui mvc grid that time by default display "no items display" in the right bottom.
Table of Contents
1. MVC Kendo UI Services Grid
2. JavaScript code
In the 1st step, code sample for mvc kendo grid, the id of this grid is Services as given below.
<div class="panel-body">
@(Html.Kendo().Grid<Models.SubscriptionViewModel>()
.Name("Services")
.AutoBind(false)
.Groupable()
.Pageable()
.Sortable()
.Events(ev => ev.Save("gridSaveSVC").Edit("gridOnEditSVC"))
.Columns(columns =>
{
columns.Bound(e =>
e.Subscriber.MobileNo).Width(100);
columns.Bound(e =>
e.ProductService.LineOfBusiness).Title("Line
Of Business").Width(100);
columns.Bound(e =>
e.ProductService.ProductClassification).Title("Product<br>Classification").Width(100);
columns.Command(cmd =>
{
cmd.Edit();
});
})
.Editable(editable =>
editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(e => e.ID);
model.Field(e =>
e.Subscriber.MobileNo).Editable(false);
model.Field(e =>
e.Subscriber.IMSI).Editable(false);
})
.Read(read => read.Action("GetSubscription", Api/Connect").Type(HttpVerbs.Get))
)
)
</div>
<script type="text/javascript">
$(document).ready(function () {
noResultsFound('#Subscribers', 'No Results Found');
});
function noResultsFound(grdSubcriber, customMsg) {
var gridSubscriber = $(grdSubcriber).data("kendoGrid");
var displayMSG = "<div
class='alert alert-danger'> " +
customMsg + " </div>";
gridSubscriber.bind("dataBound", function (e) {
if (e.sender.dataSource.view().length === 0) {
e.sender.table.closest(".k-grid-content").attr("style", "overflow-x:hidden;");
e.sender.table.closest(".k-grid-content").replaceWith(displayMSG)
}
});
}
</script>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
