Articles in this section
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:

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment