Waiting Icon Not Showing During Page Size Change of Grid

[Eli Hellmer]

Hello, I am currently using Syncfusion ASP.NET MVC. I have a razor view that displays a grid of data (using syncfusion grid) and have also added code to enable the user to change the results per page in the grid. The user can change the page size from 20 items per page, all the way up to All items in a single page. I added this code with help from you guys.

The problem I am running into is that when a user selects more than 20 items per page, the syncfusion grid takes quite awhile to load - sometimes up to 15 seconds.

That in itself is not the problem, the problem is that there is no loading icon when this happening. The grid almost freezes up and does not tell the user it is loading.

I am looking to add a spinning/loading icon while the grid is loading these entries. I found out about the "WaitingPopup" extension included in syncfusion and attempted to add that feature in. It does not work as expected, and with the code below no loading icon shows up when page size is changed.

What am I doing wrong and how can I enable the loading popup when a user changes page size?

CODE:

//code that enables page size dropdown with grid

<script type="text/x-jsrender" id="pagertemplate">

        <select name="selectIndex" class="e-ddl" id="projectPageSize">

            <option value="20">20</option>

            <option value="40">40</option>

            <option value="60">60</option>

            <option value="500">All</option>

        </select>

    </script>

//grid

<form>

@(Html.EJ().Grid("FlatGrid")

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

.AllowSorting()

.AllowPaging()

.PageSettings(p =>

p.Template("#pagertemplate").EnableTemplates().ShowDefaults().PageSize(20))

.AllowResizeToFit()

.AllowTextWrap()

.AllowScrolling()

.ScrollSettings(s => s.Width("100%"))

.AllowFiltering()

.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

.ClientSideEvents(eve => eve.DataBound("dataBound"))

.ClientSideEvents(e => e.ActionComplete("PageRefresh").ActionBegin("onBegin"))

.Columns(col =>

{

col.Field(z => z.RequestNum).HeaderText("Request #").Add();

col.Field(z => z.Status).HeaderText("Status").Add();

col.Field(z => z.Type).HeaderText("Request Type").Add();

col.Field(z => z.ProjectName).HeaderText("Project Name").Width(175).Add();

col.Field(z => z.LabShortName).HeaderText("Lab").Add();

col.Field(z => z.Requester).HeaderText("Requester").Add();

col.Field(z => z.AssignedTo).HeaderText("Assigned To").Add();

col.Field(z => z.ReceivedDate).HeaderText("Submitted Date").Add();

col.Field(z => z.ProcesHrs).HeaderText("Process/Tech Hrs").Add();

}))

@Html.EJ().WaitingPopup("target").ShowOnInit(false)

</form>

<script type="text/javascript" language="javascript">

        var index = 0;

        function PageRefresh(args){

            if (this.initialRender || args.requestType == "paging")

                renderDropdown();

        }

        function renderDropdown() {

            var gObj = $("#FlatGrid").ejGrid("instance");

            //render the ejDropDownList on pager template

            gObj.getPager().find("select").ejDropDownList({

                selectedIndex: index,

                change: "pageSizeChange",

                showRoundedCorner: true,

                width: 60, height: 25

            });

        }

    function pageSizeChange(args) {

            var popup = $("#target").data("ejWaitingPopup");   //here I attempt to get the target loading icon and show it - does not work

            popup.show();

            var gridModel = $("#FlatGrid").ejGrid("model");

            var pagerModel = $("#FlatGrid").ejGrid("getPager").ejPager("model");

            var newLastPage = Math.ceil(gridModel.pageSettings.totalRecordsCount / args.value);

            if (pagerModel.currentPage > newLastPage)

                $("#FlatGrid").ejGrid("getPager").ejPager("goToPage", newLastPage);

            $("#FlatGrid").ejGrid({ "pageSettings": { pageSize: parseInt(args.value) } });

            index = args.itemId;

            renderDropdown();     

            popup.hide();    //here I attempt to hide it - does not work

        }

</script>

[Kuralarasan Muthusamy]

Hi Eli, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We found that you want to show the ejWaitingPopup while loading the records in the grid and also you have used local dataSource to the grid. We suggest you to use DataManager to provide the dataSource to the grid. If you use dataManager then you do not need to show and hide the ejWaitingPopup. Because while using dataManager, grid was handled this action internally. 

Please refer the following code snippet: 

@(Html.EJ().Grid<EmployeeView>("Grid") 

            .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource)) 

 

                  ........ 

 

) 

In this code we have showed how to use dataManager to provide the dataSource to grid. We have also prepared the sample with your requirement and that sample can be downloadable form the below link, 

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/F1386741175987627.zip 

Please refer the following link to know about ejDataManager, 

https://help.syncfusion.com/aspnetmvc/datamanager/overview 

Please get back to us, if you need any further assistance on this, 

Regards, 

Kuralarasan M. 

[Eli Hellmer]

The loading seems to work fine on the normal grid load. I am talking about when you change the page size of the grid. It doesn't seem to realize that any data is loading, that is why I attempted to implement a loading icon upon page size change.

Thanks

[Kuralarasan Muthusamy]

Hi Eli, 

While using dataManager, Grid will show ejWaitingPopup when the records take more time to load and grid handle this action internally. Grid will show this ejWaitingPopup while changing the pageSize also.  So you do not need to show ejWaitingPopup  manually. Please use DataManager in Grid datasource to achieve your requirement and also please check with our attached sample. In that sample we have used DataManager and grid shows ejWaitingPopup while changing the pageSize. We have also prepared the video demonstration of our sample and that video demonstration can be downloadable from the below link, 

Video: http://www.syncfusion.com/downloads/support/directtrac/general/ze/video-1539920186.zip 

Regards, 

Kuralarasan M.