Category / Section
How to show WaitingPopup while exporting?
1 min read
Usually, in Grid export, waitingpopup cannot be rendered. Due to the full post, we cannot handle the Waitingpopup. However, this KB overcome those behavior using Browser Cookies.
Javascript
<div id="Grid"></div> <script type="text/javascript"> $(function () { var datasrc = @Html.Raw(Json.Encode(ViewBag.datasource)); $("#Grid").ejGrid({ dataSource: ej.parseJSON(datasrc), toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.WordExport, ej.Grid.ToolBarItems.PdfExport] }, allowPaging: true, columns: [ { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right }, { field: "OrderDate", headerText: "Order Date", format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right }, { field: "Freight", format: "{0:C2}", textAlign: ej.TextAlign.Right }, { field: "ShipName", headerText: "Ship Name" }, { field: "ShipCity", headerText: "Ship City" }, { field: "ShipCountry", headerText: "Ship Country" } ], toolbarClick: "onToolbarClick" }); }); </script>
MVC
@(Html.EJ().Grid<OrdersView>("Grid") .Datasource((IEnumerable<object>)ViewBag.datasource) .ToolbarSettings(toolBar => toolBar .ShowToolbar() .ToolbarItems(items => { items.AddTool(ToolBarItems.ExcelExport); items.AddTool(ToolBarItems.WordExport); items.AddTool(ToolBarItems.PdfExport); })) .AllowPaging() .Columns(col => { col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Add(); col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Format("{0:MM/dd/yyyy}").Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Format("{0:C}").Add(); col.Field("ShipName").HeaderText("Ship Name").Add(); col.Field("ShipCity").HeaderText("Ship City").Add(); col.Field("ShipCountry").HeaderText("Ship Country").Add(); }) .ClientSideEvents(events => events.ToolbarClick("onToolbarClick")) )
Code behind
public class HomeController : Controller { public static List<EditableOrder> ord = new List<EditableOrder>(); public ActionResult Index() { ViewBag.datasource = new NorthwindDataContext().OrdersViews.Take(100).ToList(); return View(); } public void ExportToExcel(string GridModel) { ExcelExport exp = new ExcelExport(); var DataSource = new NorthwindDataContext().OrdersViews.Take(100).ToList(); GridProperties obj = ConvertGridObject(GridModel); //Setting the cookie Response.Cookies["Export"]["isdone"] = "done"; exp.Export(obj, DataSource, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-saffron"); } public void ExportToWord(string GridModel) { WordExport exp = new WordExport(); var DataSource = new NorthwindDataContext().OrdersViews.Take(100).ToList(); GridProperties obj = ConvertGridObject(GridModel); //Setting the cookie Response.Cookies["Export"]["isdone"] = "done"; exp.Export(obj, DataSource, "Export.docx", false, false, "flat-saffron"); } public void ExportToPdf(string GridModel) { PdfExport exp = new PdfExport(); var DataSource = new NorthwindDataContext().OrdersViews.Take(100).ToList(); GridProperties obj = ConvertGridObject(GridModel); //Setting the cookie Response.Cookies["Export"]["isdone"] = "done"; exp.Export(obj, DataSource, "Export.pdf", false, false, "flat-saffron"); } private GridProperties ConvertGridObject(string gridProperty) { JavaScriptSerializer serializer = new JavaScriptSerializer(); IEnumerable div = (IEnumerable)serializer.Deserialize(gridProperty, typeof(IEnumerable)); GridProperties gridProp = new GridProperties(); foreach (KeyValuePair<string, object> ds in div) { var property = gridProp.GetType().GetProperty(ds.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase); if (property != null) { Type type = property.PropertyType; string serialize = serializer.Serialize(ds.Value); object value = serializer.Deserialize(serialize, type); property.SetValue(gridProp, value, null); } } return gridProp; } }
.Net core
<ej-grid id="FlatGrid" toolbar-click="toolbarClick" allow-paging="true" datasource="ViewBag.DataSource"> <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"excelExport","wordExport","pdfExport" })> </e-toolbar-settings> <e-columns> <e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="90"></e-column> <e-column field="CustomerID" header-text="CustomerID" width="90"></e-column> <e-column field="EmployeeID" header-text="Employee ID" width="80"></e-column> <e-column field="Freight" header-text="Freight" format ="{0:c2}" width="80" ></e-column> </e-columns> </ej-grid>
public class HomeController : Controller { public static List<Orders> order = new List<Orders>(); public IActionResult Index() { ViewBag.datasource = order; return View(); } public ActionResult ExportToExcel(string GridModel) { ExcelExport exp = new ExcelExport(); var DataSource =order; //Setting the cookie CookieOptions options = new CookieOptions(); options.Expires = DateTime.Now.AddDays(1); Response.Cookies.Append("Export", "done", options); GridProperties gridProp = ConvertGridObject(GridModel); GridExcelExport excelExp = new GridExcelExport(); excelExp.FileName = "Export.xlsx"; excelExp.Excelversion = ExcelVersion.Excel2010; excelExp.Theme = "flat-saffron"; return exp.Export(gridProp, DataSource, excelExp); } public ActionResult ExportToWord(string GridModel) { WordExport exp = new WordExport(); var DataSource = order; //Setting the cookie CookieOptions options = new CookieOptions(); options.Expires = DateTime.Now.AddDays(1); Response.Cookies.Append("Export", "done", options); GridProperties gridProp = ConvertGridObject(GridModel); GridWordExport wrdExp = new GridWordExport(); wrdExp.FileName = "Export.docx"; wrdExp.Theme = "flat-saffron"; return exp.Export(gridProp, DataSource, wrdExp); } public ActionResult ExportToPdf(string GridModel) { PdfExport exp = new PdfExport(); var DataSource = order; //Setting the cookie CookieOptions options = new CookieOptions(); options.Expires = DateTime.Now.AddDays(1); Response.Cookies.Append("Export", "done", options); GridProperties gridProp = ConvertGridObject(GridModel); GridPdfExport pdfExp = new GridPdfExport(); pdfExp.FileName = "Export.pdf"; pdfExp.Theme = "flat-saffron"; return exp.Export(gridProp, DataSource, pdfExp); } private GridProperties ConvertGridObject(string gridProperty) { GridProperties gridProp = new GridProperties(); gridProp = (GridProperties)JsonConvert.DeserializeObject(gridProperty, typeof(GridProperties)); return gridProp; } }
<script type="text/javascript"> function onToolbarClick(args) { if (args.itemName.indexOf("Export") != -1) { this.element.ejWaitingPopup("show") var testVar = setInterval(ej.proxy(function () { if (document.cookie.search("Export") != -1) { //delete cookie removecookies("Export"); //hide the popup this.element.ejWaitingPopup("hide"); clearInterval(testVar); } }, this), 100); } } removecookies = function (cook) { // This function will attempt to remove a cookie from all paths. var pathBits = location.pathname.split('/'); var pathCurrent = ' path='; // do a simple pathless delete first. document.cookie = cook + '=;expires=Thu, 25 Aug 1994 22:47:00 GMT;'; for (var i = 0; i < pathBits.length; i++) { pathCurrent += ((pathCurrent.substr(-1) != '/') ? '/' : '') + pathBits[i]; document.cookie = cook + '=;expires=Thu, 25 Aug 1994 22:47:00 GMT;' + pathCurrent + ';'; } } </script>
Output Screenshot: