ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / CSV Export
In This Topic
    CSV Export
    In This Topic

    Similar to Excel export, FlexGrid can be exported to CSV formats. To export FlexGrid, use the following code.

    Index.cshtml
    Copy Code 
    <button id="export-csv">CSV</button>
<c1-flex-grid id="grid">
    <c1-items-source source-collection="Model"></c1-items-source>
</c1-flex-grid>
<script>
    //function for converting CSV string into a downloadable file
    function exportFile(csv, fileName) {
        var fileType = 'txt/csv;charset=utf-8';
        if (navigator.msSaveBlob) { // IE
            navigator.msSaveBlob(new Blob([csv], {
                type: fileType
            }), fileName);
        }
        else {
            var e = document.createElement('a');
            e.setAttribute('href', 'data:' + fileType + ',' + encodeURIComponent(csv));
            e.setAttribute('download', fileName);
            e.style.display = 'none';
            document.body.appendChild(e);
            e.click();
            document.body.removeChild(e);
        }
    }

    //export grid to CSV
    document.getElementById("export-csv").addEventListener("click", function () {
        var grid = wijmo.Control.getControl("#grid");
        var rng = new wijmo.grid.CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1),
            csv = grid.getClipString(rng, true, true);
        exportFile(csv, 'FlexGrid.csv');
    });
</script>
    HomeController.cs
    Copy Code 
    public IActionResult Index()
{
    
    return View(ProductSales.GetData());
}

    The following code demonstrates a class, ProductSales, which serves as a datasource for the grid created above.

    C#
    Copy Code 
    public class ProductSales
{
    public int Id { get; set; }
    public string Category { get; set; }
    public string SubCategory { get; set; }
    public string Product { get; set; }
    public double Sales { get; set; }

    public static List<ProductSales> GetData()
    {
        var categories = new string[]
        {
        "Electronics",
        "Computers & Tablets"
        };

        var subCategories = new string[][]
        {
        new string[] { "Camera", "Headphones", "Cell Phones" },
        new string[] { "Desktops", "Laptops", "Tablets" }
        };

        var products = new string[][][]
        {
        new string[][]
        {
            new string[] { "Digital", "Film", "Lenses", "Video", "Accessories" },
            new string[] { "Earbud", "Over-ear", "On-ear", "Bluetooth", "Noise-cancelling", "Audiophile headphones" },
            new string[] { "Cell Phones", "Accessories" }
        },
        new string[][]
        {
            new string[] { "All-in-ones", "Minis", "Towers" },
            new string[] { "2 in 1", "Traditional" },
            new string[] { "iOS", "Android", "Windows" }
        }
        };

        var data = new List<ProductSales>();
        var random = new Random();

        for (int i = 0; i < categories.Length; i++)
        {
            for (int j = 0; j < subCategories[i].Length; j++)
            {
                for (int k = 0; k < products[i][j].Length; k++)
                {
                    data.Add(new ProductSales
                    {
                        Id = i + j + k,
                        Category = categories[i],
                        SubCategory = subCategories[i][j],
                        Product = products[i][j][k],
                        Sales = random.NextDouble() * 100
                    });
                }
            }
        }

        return data;
    }
}