Export from external button

[Edrich Landsberg]

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

[Sathyanarayanamoorthy Eswararao]

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. 

KB Link: https://www.syncfusion.com/kb/5440/how-to-pass-additional-parameter-to-server-while-exporting  

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

Sample: http://www.syncfusion.com/downloads/support/forum/138890/7z/Export_on_button_click-336047774.7z  

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. 

 

https://www.syncfusion.com/products/essential-js2  

 

Demo page for ej2 Grid 

 

https://aspnetmvc.syncfusion.com/Grid/GridOverview#/material  

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

Regards, 

Sathyanarayanamoorthy