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 Link to this post

    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!

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 20 Oct Link to this post

    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
     
    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top