Export excel from grid with url apator data binding

[Mini Dev]

How can I export excel from grid with url adaptor data binding? 

How can I bind exported products?

In my view.cshtml

@{

    List<object> toolbarItems = new List<object>();    

    toolbarItems.Add(new { text = "Esporta", tooltipText = "Esporta", prefixIcon = "e-excelexport", id = "excelexport" });

}

<div class="control-section">

    <ejs-grid id="Grid" dataBound="dataBound" allowFiltering="true" toolbarClick="toolbarClick" toolbar="@toolbarItems" allowExcelExport="true" allowPaging="true" allowSelection="false">

        <e-data-manager url="/api/products/list" adaptor="UrlAdaptor"></e-data-manager>

        [...]

    </ejs-grid>

</div>

@section PreScripts {

    <script>        

        [...]

        function toolbarClick(args) {           

            if (args.item.id === 'excelexport') {

                Grid.ej2_instances[0].excelExport();

            }

        }        

    </script>

}

Thanks

[Venkatesh Ayothi Raman]

Hi Mini, 

 

 

Thanks for using Syncfusion products. 

 

 

We can export the Grid with Url Adaptor. Based on your requirement, we have prepared a sample which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/excelexport-1532172279  

 

 

Please refer to the step by step procedure, 

Step 1: A simple sample has been prepared in which grid is rendered with Excel Exporting feature. 

Step 2: In this Grid data is bound by using “UrlAdaptor”. 

Step 3: ExcelExport feature is enabled by using ‘allowExcelExport’ API and in the toolbar I have used custom toolbar item for Excel Export as per the code provided by the customer. 

Step 4: In the ‘toolbarClick’ event Grid is exported by using ‘gridObj.excelExport()’ method. 

 

Please find the code example, Documentation link and sample link below. 

 

[index.cshtml] 

@{ 

    List<object> toolbarItems = new List<object>(); 

    toolbarItems.Add(new { text = "Esporta", tooltipText = "Esporta", prefixIcon = "e-excelexport", id = "excelexport" }); 

} 

 

 

<ejs-grid id="Grid" allowFiltering="true" toolbarClick="toolbarClick" toolbar="@toolbarItems" allowExcelExport="true" allowPaging="true" allowSelection="false"> 

    <e-data-manager url="/Home/GridDatasource" adaptor="UrlAdaptor"></e-data-manager> 

    .  .  . 

</ejs-grid> 

 

<script> 

    function toolbarClick(args) { 

        var ele = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

        if (args.item.id === 'excelexport') { 

            ele.excelExport(); 

        } 

 

    } 

</script>   

 

 

Documentation : https://ej2.syncfusion.com/documentation/grid/api-grid.html#allowexcelexport  

                               https://ej2.syncfusion.com/documentation/grid/api-grid.html#excelexport  

                               https://ej2.syncfusion.com/documentation/grid/api-grid.html#toolbarclick  

Regards, 

Venkatesh Ayothiraman.