This is a migrated thread and some comments may be shown as answers.

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

1 Answer 259 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Andrew asked on 18 Oct 2016, 06:43 PM

I found this article:

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:

            .DataSource(dataSource => dataSource
                .Model(model => model.Id(x=>x.NPI))
                .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);
            .Scrollable(src => src.Height("auto"))
            .Pageable(pageable => pageable
    .Title("NPI Details")
    .Actions(builder => builder.Refresh().Close())
<script type="text/javascript">
    function showDetails(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");
            // 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 }
    $(function () {
        var windowWidget = $("#Details").data("kendoWindow");
        $("#showOverlay").click(function () {
            kendo.ui.progress(windowWidget.element, true);


Thank you for your help!

1 Answer, 1 is accepted

Sort by
Boyan Dimitrov
Telerik team
answered on 20 Oct 2016, 09:09 AM

Hello Andrew,

In general the id attribute of a HTML element should be unique. As stated in 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. 

Boyan Dimitrov
Telerik by Progress
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
Asked by
Top achievements
Rank 2
Answers by
Boyan Dimitrov
Telerik team
Share this question