How to Export Grids to Excel with Web API and FlexGrid

With Web API's Visual Studio templates, you create an Excel service inside Visual Studio so you can export grids to Excel without losing formatting. This gives you more opportunities to customize your application, including how it's hosted. Once you've deployed your service project, you'll be able to call your service for a wide range of functions. Web API works with FlexGrid for ASP.NET MVC so you won't lose any formatting; any merged cells or headers, formatted text, and grouped data is exported as it appears in your FlexGrid.

Web API allows you to work either in MVC or in HTML. The following example code is for an MVC application. See the documentation for the HTML example.

Export Grid to Excel

1. Add the C1 Web API Client JavaScript file and its reference to your MVC or HTML project.

2. Create the function that will implement the export function. Use the Client JavaScript Helper, and add the following code to your Views|MVCFlexGrid|Index.cshtml file.

   ASP.NET MVC code

~~~


    function exportFlex() {  
        var exporter = new c1.mvc.grid.ExcelExporter();  
        fileType = document.getElementById("mySelect").value;  
        var gridcontrol = wijmo.Control.getControl("#flexGrid");  
        exporter.requestExport  
(gridcontrol,   
"http://demos.componentone.com/ASPNET/C1WebAPIService/api/export/excel", {  
            fileName: "exportFlexGrid",  
            type: fileType,  
        });  
    }  


~~~

3. Add a button to your application to call the export function within your Views|MVCFlexGrid|Index.cshtml file. You'll add the export function to the button click event.

   ASP.NET MVC code

~~~




        Xls  
        Xlsx  
        Csv  

Export  



~~~

4. Build and run your project. When you run it, it should resemble the following image:

   

• See the Web API documentation »
• Read more about Web API »