WaitingPopup never shows when data is loading...

[Corey Thompson]

I have a multiple grids on a single page. All doing different things. Some are using row templates, others are just normal tables. For the most part they are working wonderfully, but none of them show the WaitingPopup when data is loading. It doesnt matter if I load the data on page load, or load the data on a button click.  All of my data is being served via partialviews and viewmodels.

For example: I have a partialview that allows a user to select a value from a dropdown. Then they click a search button and it opens a dialog containing an ejGrid and displays the results...

Controller 

        [HttpPost]

        public ActionResult SearchBestSpecialties(int slidekitId)

        {

            var data = _slidekitRepository.SearchBestSpecialties(slidekitId);

            return Json(new { Items = data });

        }

PartialView

@{Html.EJ().Dialog("dlgBestSpecialtySearch").Title("AbbVie Best Specialty Search").ContentTemplate(@<div>

    <p>

        The following is a list of approved specialties for:

    </p>

    <p>

        <span id="spnBestSpecialtySearchSelectedSlidekitTitle"></span>

    </p>

    @(Html.EJ().Grid<BestSpecialty>("grdBestSpecialtySearch")

    .Datasource(Model.BestSpecialties)

    .AllowScrolling()

    .AllowSorting()

    .ScrollSettings(scroll => { scroll.Height(375).Width("100%"); })

    .Columns(c =>

    {

        c.Field("FullName").HeaderText("Approved Specialties").Add();

    }))

    </div>).ShowOnInit(false).Width(735).Height(615).IsResponsive(true).Render();}

That data is huge and can take about 30 seconds to load. the Dialog opens and the grid shows but it initially shows "No records to display". Now if you sit long enough, the data suddenly loads up. I never see a WaitingPopup, though. And every one of your demo examples seem to show one. What am I missing?

[Balaji Marimuthu]

Hi Corey,

Thanks for contacting the Syncfusion support.

By default, the waiting popup will display when binding the remote DataSource in the Grid Ex: (ds=> ds.URL(“/Grid/Data”)). It doesn’t display while binding the local DataSource. If we bind the local IEnumerable data to Grid through button click and want to show the waiting popup, you have use show method to display waiting popup in Grid before binding the data and use hide method to hide waiting popup in success event.

Refer to the sample and code example as below.
Sample: Sample-Partialview

<script type="text/javascript">

    $(function () {

        $("#btn").ejButton({

            text: "Button",

            click: function (args) {

                $("#FlatGrid").ejWaitingPopup("show"); //you can show the waiting popup- before bind the data to grid

                $.ajax({

                    url: "/Grid/Edit",

                    type: "GET",

                    success: function (data) {

                        $("#FlatGrid").ejGrid("model.dataSource", data.Items);

                        $("#FlatGrid").ejWaitingPopup("hide");  //hide waiting popup – after bind the data to Grid

                    },

                    error: function (xhr) {

                        alert('error');

                    }

                });

            }

        })

    })
</script>

Refer to the Help Documents:
http://help.syncfusion.com/js/api/ejwaitingpopup#methods:hide
http://help.syncfusion.com/js/api/ejwaitingpopup#methods:show

If you face any issue, kindly share the full sample with how do you bind the dataSource to Grid or modify the sample as issue reproducible.


Regards,
Balaji Marimuthu

[Corey Thompson]

Thank you, Balaji. I had assumed as much but I wanted to be sure I wasn't missing something - I wanted to be sure I did it properly. You guys are great as always.

[Balaji Marimuthu]

Hi Corey,

Thanks for the update.

We are happy that the provided solution helped you. Please get back to us if you need any further assistance.

Regards,
Balaji Marimuthu