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

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    39 posts
    Member since:
    Sep 2013

    Posted 18 Oct 2016 Link to this post

    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!

  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    2062 posts

    Posted 20 Oct 2016 Link to this post

    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.
Back to Top