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>