python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions