CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-grid
gene
gene

Reputation: 2108

How to show a progress loading indicator with Kendo.Grid() inside a modal pop up?

I defined a Grid inside of my Partial View that is loaded into a modal popup.

This is the part of the Grid:

 @(Html.Kendo().Grid(Model.ReportReversalsData)
     .Name("MyGrid")
     .
     .
     .DataSource(ds => ds
                .Ajax()
                .Events(e => e.Error("ShowError"))
                .Read(r => r.Action("MyMethod", "MyController", Model))
     )
)

Now, I want to shoe a progress loading indicator inside of the Grid every time the data is loading.

I tried to define a javascript method showLoading that is invoked on RequestStart event of the grid:

.Events(e => e.Error("CheckError").RequestStart('showLoading'))

And this is showLoading function and some .css styling required for the kendo.ui.progress:

<style>
    .k-grid-content > .k-loading-mask
    {
        visibility: hidden;
    }

    .k-grid > .k-loading-mask
    {
        z-index: 2;
    }

    .k-grid > .k-loading-mask > .k-loading-color
    {
        opacity: .7;
    }

</style>

<script>
    function showLoading()
    {
       kendo.ui.progress("#MyGrid", true)
    }
</script>

However, I'm getting an error:

Object doesn't support property or method 'find'

What am I missing, or my approach is completely wrong and there is some other way to do that?

Upvotes: 0

Views: 6818

Answers (1)

GeorgeB
GeorgeB

Reputation: 848

Instead of trying to use the plain text id, use the actual kendo element:

function showLoading()
{
    var myGrid = $("#myGrid").getKendoGrid();
    kendo.ui.progress(myGrid, true);
}

Upvotes: 3

Related Questions