No Result Found in kendo ui grid mvc

No Results Found in Kendo UI Grid MVC

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.


<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>


In the 2nd step, javascript code sample for the display "No Results Found" as given below..

<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

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^