New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Export Grid Data to CSV Files
Environment
Product | Telerik UI for ASP.NET MVC Grid |
Product version | 2025.1.227 |
Description
How can I export the Grid's data to CSV format?
Solution
You can implement the CSV export by following the next steps:
-
Define the Grid and specify a custom command in the toolbar that will trigger the CSV export. Also, handle the
DataBound
event of the Grid.Razor@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridCsvServerExport.Models.Product>() .Name("Grid") .DataSource(ds => ds .Ajax() .Model(m => { m.Id(p=>p.ProductID); }) .Read(r => r.Action("Read", "Home")) ) .ToolBar(toolBar => toolBar .Custom() .Text("Export To CSV") .HtmlAttributes(new { id = "export" }) .Url(Url.Action("Export", "Home", new { page = 1, pageSize = "~", filter = "~", sort = "~" })) ) .Columns(columns => { columns.Bound(p => p.ProductID); columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice).Format("{0:c}"); columns.Bound(p => p.QuantityPerUnit); }) .Events(ev => ev.DataBound("onDataBound")) .Pageable() .Sortable() .Filterable() )
-
Within the
DataBound
event handler, add a custom logic that modifies thehref
attribute of the Export To CSV toolbar command to send thepage
,sort
,pagseSize
, andfilter
parameters to the server, when the command is clicked.JSfunction onDataBound(e) { var grid = $('#Grid').data('kendoGrid'); // Use the "parameterMap" to create the request object. var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" })) .options.parameterMap({ page: grid.dataSource.page(), sort: grid.dataSource.sort(), filter: grid.dataSource.filter() }); // Get the export link as jQuery object. var $exportLink = $('#export'); // Get its 'href' attribute - the URL where it would navigate to. var href = $exportLink.attr('href'); // Update the 'page' parameter with the grid's current page. href = href.replace(/page=([^&]*)/, 'page=' + requestObject.page || '~'); // Update the 'sort' parameter with the grid's current sort descriptor. href = href.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~'); // Update the 'pageSize' parameter with the grid's current 'pageSize'. href = href.replace(/pageSize=([^&]*)/, 'pageSize=' + grid.dataSource._pageSize); // Update filter descriptor with the applied filters. href = href.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~')); // Update the 'href' attribute. $exportLink.attr('href', href); }
-
Export the file using the following controller action:
C#public FileResult Export([DataSourceRequest] DataSourceRequest request) { // Export only the current page var data = products.ToDataSourceResult(request).Data; // Export all pages (uncomment next line) //var data = products; var output = new MemoryStream(); var writer = new StreamWriter(output, Encoding.UTF8); writer.Write("ProductName,"); writer.Write("UnitPrice,"); writer.Write("QuantityPerUnit"); writer.WriteLine(); foreach (Product product in data) { writer.Write(product.ProductName); writer.Write(","); writer.Write("\""); writer.Write(product.UnitPrice); writer.Write("\""); writer.Write(","); writer.Write("\""); writer.Write(product.QuantityPerUnit); writer.Write("\""); writer.WriteLine(); } writer.Flush(); output.Position = 0; return File(output, "text/comma-separated-values", "Products.csv"); }
To review the complete example, refer to the ASP.NET MVC project on how to implement a server-side export of the Grid's data to a CVS (comma-separated value) file.
More ASP.NET MVC Grid Resources
- ASP.NET MVC Grid Documentation
- ASP.NET MVC Grid Demos
- ASP.NET MVC Grid Product Page
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums