We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

EJS().Grid() with ajax calling to fill data, do not hide the spinner or dataloader.

Thread ID:

Created:

Updated:

Platform:

Replies:

147660 Sep 18,2019 11:34 PM UTC Sep 23,2019 06:58 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Anand Gupta
Asked On September 18, 2019 11:34 PM UTC

Hi Team,
I was trying to load data in EJS Grid with Ajax call. It worked well. But then tried to show spinner while loading data for grid. After showing spinner on button click. It never hide even all data is loaded in Grid.

Below is my code without spinner implementation.

<body>
    <div class="container">
        @{Html.RenderPartial("Header");}
        <div class="row">
            <div class="col-lg-12">
                <div class="container">
                    <h2 class="display-4"><i class="fa fa-list"></i> Supplier list with overall rating </h2>
                </div>
                <div class="tablediv">
                    <div class="rowdiv">
                        <div class="celldiv">
                            <div class="container-fluid" style="border: solid 1px #EDEDED; padding: 5px 7px 5px 7px;">
                                <div class="col-sm-2">
                                    <h5>Member Group :</h5>
                                </div>
                                <div class="col-sm-4">
                                    @Html.EJS().ComboBox("MemberGroup").Placeholder("Select Member Group").DataSource(
                    (IEnumerable<MemberGroupListViewModel>)ViewBag.MemberGroups).Fields(new ComboBoxFieldSettings { Text = "MemberGroupName", Value = "MemberGroupId" }).Render()
                                </div>
                                <div class="col-sm-6" style="display: flex; justify-content:flex-end">
                                    @Html.EJS().Button("btnViewReport").Content("View Report").Render()
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="ControlRegion">
                    @Html.EJS().Grid("SupplierListWithOverallRatingGrid").DataSource((IEnumerable<object>)Model).AllowExcelExport().AllowPdfExport().EnableAltRow().ToolbarClick("toolbarClick").AllowSorting().AllowFiltering().AllowGrouping().AllowResizing(true).Columns(col =>
               {
                   col.Field("ParentMemberId").HeaderText("P. Member Id").MinWidth("40").Width("140").MaxWidth("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                   col.Field("ParentName").HeaderText("Parent Name").Width("180").MinWidth("40").Add();
                   col.Field("InvitedSupplierId").HeaderText("Invited Supplier Id").Width("170").MinWidth("8").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                   col.Field("SupplierMemberId").HeaderText("Supplier Member Id").Width("180").MinWidth("8").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
                   col.Field("SupplierName").HeaderText("Supplier Name").MinWidth("8").Width("350").Add();
                   col.Field("CountryName").HeaderText("Country").Width("120").Add();
                   col.Field("Category").HeaderText("Category").MinWidth("8").Width("120").Add();
                   col.Field("SupplierStatus").HeaderText("Supplier Status").MinWidth("10").Width("160").Add();
                   col.Field("Yes").HeaderText("Yes").MinWidth("10").Width("80").Format("#0.00").Add();
                   col.Field("No").HeaderText("No").MinWidth("10").Width("80").Format("#0.00").Add();
                   col.Field("NA").HeaderText("N/A").MinWidth("10").Width("80").Format("#0.00").Add();
                   col.Field("TotalQuestion").HeaderText("Total Question").MinWidth("120").Width("140").Format("#0.00").Add();
                   col.Field("Calculation").HeaderText("Calculation").MinWidth("10").Width("150").Format("#0.00").Add();
               }).Toolbar(new List<string>() { "ExcelExport" }).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).AllowPaging().PageSettings(page => page.PageSize(15).PageCount(10)).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Render()
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function toolbarClick(args) {
        var gridObj = document.getElementById("SupplierListWithOverallRatingGrid").ej2_instances[0];
        if (args.item.id === 'SupplierListWithOverallRatingGrid_excelexport') {
            var excelExportProperties = {
                fileName: "SupplierListWithOverallRating.xlsx",
                theme: {
                    header: { fontName: 'Segoe UI', fontColor: '#666666' },
                    record: { fontName: 'Segoe UI', fontColor: '080808' },
                    caption: { fontName: 'Segoe UI', fontColor: '#32a852' }
                }
            };
            gridObj.excelExport(excelExportProperties);
        } else if (args.item.id === 'SupplierListWithOverallRatingGrid_pdfexport') {
            gridObj.pdfExport();
        }

    }

    document.getElementById("btnViewReport").addEventListener('click', function () {
        var SupplierListgrid = document.getElementById('SupplierListWithOverallRatingGrid').ej2_instances[0]; // Grid instance
        var memberGroupId = document.getElementById('MemberGroup').ej2_instances[0];
        $.ajax({
            url: "SupplierListOverallRatingGridData",
            type: "GET",
            data: { memberGroupId: memberGroupId.value },
            success: function (result) {
                SupplierListgrid.dataSource = result;
            }
        })
    });

</script>


Thanks
Anand

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 19, 2019 12:33 PM UTC

Hi Anand, 

Thanks for contacting Syncfusion support, 

We could see you would like to handle the spinner in the Grid while loading data from external action. At the same time of spinner implementation, we suspect that you are unable to hide them. We suggest you to use the hideSpinner method of the Grid to hide them in the Ajax Success callback function as shown in the following code example. 

[Index.cshtml] 
@Html.EJS().Grid("Grid").AllowPaging().Load("Load").DataSource(ds => { ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).Columns(col => 
{ 
.   .    .     . 
 
}).AllowPaging().PageSettings(page => page.PageSize(15).PageCount(10)).Render() 
 
<script>  
 
    document.getElementById("btnViewReport").addEventListener("click", function () { 
        var gridObj = document.getElementById("Grid").ej2_instances[0]; 
        gridObj.showSpinner(); // show the spinner 
        var Ajax = new ej.base.Ajax({ 
            type: "POST", 
            url: "/Home/getDate", 
           contentType: "application/json; charset=utf-8", 
        }); 
        Ajax.send(); 
        Ajax.onSuccess = function (result) {             
            var gridObj = document.getElementById("Grid").ej2_instances[0];             
            var data = new ej.data.DataUtil.parse.parseJson(result);  
            gridObj.dataSource = data; 
            gridObj.hideSpinner(); // We have hide the spinner while bind data in Grid 
        }; 
        Ajax.onFailure = function (data) { 
             
        } 
    }) 


If you are still facing any problem, please share the following details to analyze the problem at our end.  

  1. Video demo of the issue
  2. Complete code example with the spinner implementation
  3. Replication procedure of the issue

Regards, 
Seeni Sakthi Kumar S 


Anand Gupta
Replied On September 22, 2019 11:47 PM UTC

Hi Seeni,

Thanks for the support, this is working great. Just one more help on how can I pass parameter to ajax call.
I tried sending it as 
        var Ajax = new ej.base.Ajax({ 
            type: "GET", 
            url: "SupplierListOverallRatingGridData",
            data: { memberGroupId: memberGroupId.value },
           contentType: "application/json; charset=utf-8", 
        }); 
        Ajax.send(); 
        Ajax.onSuccess = function (result) {             
            var SupplierListgrid = document.getElementById("SupplierListWithOverallRatingGrid").ej2_instances[0];             
            var data = new ej.data.DataUtil.parse.parseJson(result);  
            SupplierListgrid.dataSource = data; 
            SupplierListgrid.hideSpinner(); // We have hide the spinner while bind data in Grid 
        }; 

but this didn't work. Then changed the url to have parameter with it and this worked, but is there some other way to send parameters with ajax call.
        
     var urlF = "SupplierListOverallRatingGridData?memberGroupId=" + memberGroupId.value;
        var Ajax = new ej.base.Ajax({ 
            type: "GET", 
            url: urlF,
           contentType: "application/json; charset=utf-8", 
        }); 

Thanks
Anand

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 23, 2019 06:58 AM UTC

Hi Anand, 

We are happy to hear that the provided solution worked for you.  
 
To send a date to the server-end, you have to strigify the object wrapper as shown in the following code example. 
 
[index.cshtml] 

document.getElementById("btnViewReport").addEventListener("click", function () { 
        var gridObj = document.getElementById("Grid").ej2_instances[0]; 
        gridObj.showSpinner(); 
        var Ajax = new ej.base.Ajax({ 
            type: "POST", 
            url: "/Home/getDate", 
            contentType: "application/json; charset=utf-8", 
            data: JSON.stringify([{ memberGroupId: 1 }]) 
        }); 
        Ajax.send(); 
        Ajax.onSuccess = function (result) {             
            var gridObj = document.getElementById("Grid").ej2_instances[0];             
            var data = new ej.data.DataUtil.parse.parseJson(result); 
            gridObj.dataSource = data; 
            gridObj.hideSpinner(); 
        }; 
        Ajax.onFailure = function (data) { 
             
        } 
    }) 
 
[HomeController.cs] 
 
       public ActionResult getDate(List<memberGroup> id) 
        { 
           .     .      .      .  
            return Json(order); 
        } 
        public class memberGroup { 
            public int memberGroupId { get; set; } 
        }     



Please get back to us, if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon