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

3 Replies
2 Participants

Created by
AG Anand Gupta

Platform
ASP.NET MVC - EJ 2

Platform
ASP.NET MVC - EJ 2

Control
Grid

Created On
Sep 18, 2019 11:34 PM UTC

Last Activity On
Sep 23, 2019 06:58 AM UTC

Want to subscribe?
SIGN IN

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>

@{Html.RenderPartial("Header");}

<h2 class="display-4"><i class="fa fa-list"></i> Supplier list with overall rating </h2>

</div>

<h5>Member Group :</h5>

</div>

@Html.EJS().ComboBox("MemberGroup").Placeholder("Select Member Group").DataSource(

(IEnumerable<MemberGroupListViewModel>)ViewBag.MemberGroups).Fields(new ComboBoxFieldSettings { Text = "MemberGroupName", Value = "MemberGroupId" }).Render()

</div>

@Html.EJS().Button("btnViewReport").Content("View Report").Render()

</div>

@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>

</body>

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

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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()

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) {

}

})

Help Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#hidespinner

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

Video demo of the issue
Complete code example with the spinner implementation
Replication procedure of the issue

Regards,

Seeni Sakthi Kumar S

AG Anand Gupta 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

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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; }

}

Sample link: https://www.syncfusion.com/downloads/support/forum/147660/ze/EJ2Grid-virtualScroll-181082646.zip

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

Regards,

Seeni Sakthi Kumar S

Need More Help?

Get personalized assistance from our support team.

Contact Support

3 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
AG Anand Gupta
Platform
ASP.NET MVC - EJ 2
Control
Grid
Created On
Sep 18, 2019 11:34 PM UTC
Last Activity On
Sep 23, 2019 06:58 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support