1. Home
  2. Forum
  3. ASP.NET Core
  4. Export from external button

Export from external button

Hi

I'm using the following code to export a grid using the toolbar-click event


     function onToolbarClicked(args) {
        if (args.itemName.indexOf("Export") > -1) { 
            this.model["exportModel"] = retrieveStockOnHandSearchModel();
        }

        if (args.itemName == "Excel Export") {
            args.cancel = true;
            this.export('@Url.Action("Export", "StockOnHand")'); 
        }

    } 

This ads my own model to the post request.

How would I be able to do the same from an external button, is there a client side method I can raise to retrieve the GridProperties from my ej-grid

Thanks

1 Reply
SE Sathyanarayanamoorthy Eswararao Syncfusion Team July 25, 2018 12:35 PM UTC

Hi Edrich, 

Thanks for using Syncfusion products. 

According to your query we suspect that you need to send your own model in an extra parameter to the server side on external button click while exporting. We have achieved your requirement in the below code example by taking the grid instance. 

Please refer the below code example. 


<input type="button" onclick="Export()" value="Export" /> 
 
 
<ej-grid id="FlatGrid" allow-paging="true"> 
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings> 
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 
    <e-datamanager url="/api/Orders" adaptor="WebApiAdaptor"></e-datamanager> 
    <e-columns> 
        <e-column field="OrderID" header-text="Order ID" text-align="Right" width="75" is-primary-key="true"></e-column> 
        <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column> 
        <e-column field="EmployeeID" header-text="EmployeeID" width="80"></e-column> 
        <e-column field="ShipCity" header-text="ShipCity" width="110"></e-column> 
    </e-columns> 
</ej-grid> 
 
<script type="text/javascript"> 
 
    function Export() { 
 
        var gridObj = $("#FlatGrid").ejGrid("instance"); 
 
        gridObj.model["exportModel"] = "gridmodel"; 
 
        gridObj.export('@Url.Action("Export", "Home")'); 
 
 
    } 
</script> 
 
[controller.cs] 
 
public ActionResult Export(string GridModel) 
        { 
            ExcelExport exp = new ExcelExport(); 
            var DataSource = _context.Orders.Take(100).ToList(); 
            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); 
        } 
 
        private GridProperties ConvertGridObject(string gridProperty) 
        { 
            GridProperties gridProp = new GridProperties(); 
            gridProp = (GridProperties)JsonConvert.DeserializeObject(gridProperty, typeof(GridProperties)); 
            return gridProp; 
        } 

We also have a Knowledge base documentation on how to pass an additional parameter to server while exporting and explained about serializing the sent additional parameter. Please refer the below link for KB document. 


We have prepared a sample which can be downloaded from the below location. 



We also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive and lightweight. 
 
We suggest you look into our following product page for more details. 
 
 
Demo page for ej2 Grid 
 


If we have misunderstood your query please get back to us. We will be happy to assist you. 


Regards, 
Sathyanarayanamoorthy 


Loader.
Up arrow icon