WaitingPopup displays at same time as grid

[Tony Sollazzo]

Hi - I have 2 controls, waitingpopup and grid, and the grid has .ClientSideEvent to run 'showwaitingpopup' and 'hidewaitingpopup' on ActionBegin and ActionComplete beause I want a "please wait" as the grid is updated.

To debug I've inserted a "alert('hi')" in 'showwaitingpopup' and 'hidewaitingpopup' to see if they are firing, which they are, but take the alert away and no popup appears. This is especially annoying on the initial grid load which takes a while.

However if waitingpopup is the sole control then it starts correctly (.ShowOnInit(true)).

It looks as though both controls are rendered together as a group, rather that one control at a time. Is that correct, and if so, is there a way for them to be independent?

Thanks.

[Seeni Sakthi Kumar Seeni Raj]

Hi Tony, 

We suspect that you would like to show a ejWaitingPopup at the initial load of Grid/updating the records. But by default the Grid will show a waiting popup at the initial load of Grid as well as the editing action on Grid after binding the remote data in the Grid. So there is no need of handling the waiting popup explicitly. Refer to the following code example and screenshots. 

<div id="Grid"></div> 

 

 

<script type="text/javascript"> 

    $(function () { 

        var dataManager = ej.DataManager({ 

            url: "/Home/DataSource", 

            updateUrl: "/Home/Update", 

            insertUrl: "/Home/Insert", 

            removeUrl: "/Home/Delete", 

            adaptor: new ej.UrlAdaptor(), 

        }); 

        $("#Grid").ejGrid({ 

            dataSource: dataManager, 

            allowPaging: true, 

            editSettings: { 

                allowEditing: true, 

                allowDeleting: false, 

                allowAdding: true 

            }, 

            toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "update", "cancel","delete"] }, 

            columns: [ 

                { field: "OrderID", isPrimaryKey: true },  

                  . ..  . 

            ] 

        }); 

    }); 

</script> 

At initial loading of data in Grid:  

 

While updating the Grid Records: 

 

We have prepared a sample that can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/125005/ze/ejGrid-988723958.zip 

If you are rendering the Grid in different way apart from above described action, please share the following information to analyze the issue. 

1)      Code example of Grid and explain the complete way for rendering the Grid 

2)      Explain the scenario whether you would like to show the popup at initial render/updating the Grid records. But the above code example will show the popup in both scenarios. 

3)      Stack track of browser console(if any error) 

4)      If possible, modify the attached sample and replicate the issue. 

5)      Would you like to customize the ejWaitingPopup shown in the Grid? If that is the case, please explain the scenario that would you like to do? 

Regards, 

Seeni Sakthi Kumar S. 

[Tony Sollazzo]

Hi Seeni - thanks for your really quick response (I couldn't find any other posts about this so maybe I'm the only person doing it wrong).

*After* the data binding the waitingpopup may be appearing/disappearing automatically ( but and it is so quick I can't see it ) so thank you for that information and I can remove that eventhandler.

My question was more about *before* the data binding when the page has been built but the grid is *not yet visible*.

For this I created a "target" div and put the waitingpopup and grid inside the div i.e.

    <div id="target">
        @Html.EJ().WaitingPopup("target").ShowOnInit(true).ShowImage(true).Text("Loading, please wait...")
        @(Html.EJ().Grid<FloorLocation.App_Data.personlocation>("Grid")
            .Datasource((IEnumerable<FloorLocation.App_Data.personlocation>)ViewBag.datasource)

            .Columns(col =>
            {
                col.Field(p => p.id).HeaderText("id").IsPrimaryKey(true).Visible(false).Add();
                col.Field(p => p.OrgLevel3).HeaderText("Section").Add();

            (etc)

         )

    </div>

However I'm guessing that the waitingpopup and grid appear to fire at the same time?

From your sample code is looks like I have to create the grid using javascript, is that where I am going wrong?

[Seeni Sakthi Kumar Seeni Raj]

Hi Tony, 

We suspect that you would like to show an external waiting popup before rendering the Grid (on loading the page) and hide it after rendering the Grid (even if the Grid is not populated with the data). If that is the case, in hide the target element’s waiting popup at the Load event of the Grid.  

<div id="target"> 

    @Html.EJ().WaitingPopup("target").ShowOnInit(true).ShowImage(true).Text("Loading, please wait...") 

    @(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.data) 

          . . . . 

        .ClientSideEvents(events=>events.Load("onLoad")) 

        ) 

</div> 

 

<script> 

    function onLoad(args) { 

        $("#target").ejWaitingPopup("hide"); 

    } 

</script> 

If you would like to hide the waiting popup of the #target element after populating the Grid with the data, hide them in the DataBound event of the Grid. 

<div id="target"> 

    @Html.EJ().WaitingPopup("target").ShowOnInit(true).ShowImage(true).Text("Loading, please wait...") 

    @(Html.EJ().Grid<object>("FlatGrid") 

 

        .Datasource((IEnumerable<object>)ViewBag.data) 

            . . . . 

.ClientSideEvents(events=>events.DataBound("databound")) 

        ) 

</div> 

 

<script> 

    function databound(args) { 

        $("#target").ejWaitingPopup("hide"); 

    } 

</script> 

In the provided code example, we could see the DataSource bound to the Grid is the local data whereas the Grid will show the waiting popup only if the Grid is bound with the remote datasource. If you are using the remote dataSource and you would like to hide the default waiting popup appearing for the Grid, hide them in the ActionBegin event of the Grid. Refer to the following code example. 

<div id="target"> 

    @Html.EJ().WaitingPopup("target").ShowOnInit(true).ShowImage(true).Text("Loading, please wait...") 

    @(Html.EJ().Grid<object>("FlatGrid")  

        .Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/")    

        . . . . 

        .ClientSideEvents(events=>events.ActionBegin("actionBegin")) 

        ) 

</div> 

 

<script> 

    function actionBegin(args) { 

        this.element.ejWaitingPopup("hide"); 

    } 

</script> 

Regards, 

Seeni Sakthi Kumar S.