How to get a progress bar over the window while it's loading

[Andrew]

I found this article: http://docs.telerik.com/kendo-ui/controls/layout/window/how-to/display-loading-overlay

But that seems to work with just one button. My button is in a grid, so there are multiple buttons with the id of showOverlay. Here's how everything looks:

@(Html.Kendo().Grid<vNPISearch>()
            .Name("npi-grid")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model => model.Id(x=>x.NPI))
                .PageSize(10)
                .ServerOperation(true)
                .Read(read => read.Action("NPI_Read", "Pecos")))
            .Columns(columns =>
            {
                columns.Template(x => { }).ClientTemplate("#=GetPecosStatus(PecosNPI) #").Width(50);
                columns.Bound(x => x.ProviderFirstName).Title("First Name");
                columns.Bound(x => x.ProviderLastName).Title("Last Name");
                columns.Bound(x => x.ProviderBusinessLocationAddressCity).Title("City");
                columns.Bound(x => x.ProviderBusinessLocationAddressState).Title("State");
                columns.Bound(x => x.NPI).Title("NPI");
                columns.Command(command => command.Custom("View Details").HtmlAttributes(new { id = "showOverlay" }).Click("showDetails")).Width(180);
            })
            //.ClientDetailTemplateId("template")
            .Scrollable(src => src.Height("auto"))
            .Sortable()
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
      )

@(Html.Kendo().Window().Name("Details")
    .Title("NPI Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(500)
    .Actions(builder => builder.Refresh().Close())
)

<script type="text/javascript">
    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");
        wnd.refresh({
            // Url to the action fetching the partial view
            url: "/Pecos/GetNPIData",
            // The id passed to the action so that model can be found
            data: { npi: dataItem.NPI }
        });
        wnd.center().open();
    }

    $(function () {
        var windowWidget = $("#Details").data("kendoWindow");

        $("#showOverlay").click(function () {
            kendo.ui.progress(windowWidget.element, true);
        });
    });
</script>

 

Thank you for your help!

[Boyan Dimitrov]

Hello Andrew,

In general the id attribute of a HTML element should be unique. As stated in  Element.id article: 

"It must be unique in a document, and is often used to retrieve the element using getElementById."

I would suggest to use a class name to associate more than one element with same selector. 

Regards,
Boyan Dimitrov
Telerik by Progress