FlexGrid CSV export not working

Posted by: daniel.koffler on 5 April 2023, 10:56 pm EST

    • Post Options:
    • Link

    Posted 5 April 2023, 10:56 pm EST

    Hello,

    I am using this method to export FlexGrid data to a CSV file for a Blazor server application.

     private async Task HandleExcelExport(ClickEventArgs args)
        {
            using var stream = new MemoryStream();
            _planValuesGrid.Save(stream, GridFileFormat.Csv, Encoding.UTF8, GridSaveOptions.SaveHeaders);
            
            var fileName = "export.csv";
            var fileContent = Encoding.UTF8.GetString(stream.GetBuffer());
    
            await JSRuntime.InvokeVoidAsync("blazorInterop.saveFlexGridAsFile", fileName, fileContent);
        }

    As well as this JavaScript function:

    //ComponentOne Blazor grid.
    blazorInterop.saveFlexGridAsFile = function (filename, bytesBase64) {
        var link = document.createElement('a');
        
        link.download = filename;
        link.href = "data:application/octet-stream;base64," + bytesBase64;
    
        //Needed for Firefox.
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    However if executing I receive the browser download error: “Couldn’t download - Network issue”. I tried locally on MacOS as well as published to Azure.

    Thank you

    Daniel

  • Posted 9 April 2023, 10:40 pm EST - Updated 9 April 2023, 10:45 pm EST

    Hi Daniel,

    It seems like an implementation issue with your code snippet. I tested with creating a Blazor server sample and it seems to be working fine at my end. Kindly refer to the attached sample that I have used for testing.

    If the issue still persists for you, kindly share a minimal working sample replicating the issue.

    In the attached sample, I have included the all the javascript code in the “wwwroot-> scripts.js” file.

    Regards,

    Ankit

    Sample: FlexGrid_CSV_Export_Blazor_Server.zip

  • Posted 15 April 2023, 8:08 pm EST

    Hello

    that worked. However your implementation differs from the one described in the documentation. https://www.grapecity.com/componentone/docs/blazor/online-blazor/exporting_data.html

    Documentation has the following issues:

    • “grid.SaveAsync” which does not exist.
    • ContentType = mimeType.GetType().GetProperty(fileFormat.ToString()).GetValue(mimeType, null) raised a null exception
    • JavaScript file is not mentioned and the one which I found somewhere else on your side is different from the one in your example.

    Anyhow. The following method together with the JavaScript form your example fulfilled my requirement.

    private async Task HandleExcelExport(ClickEventArgs args)
    {
        using var stream = new MemoryStream();
        _planValuesGrid.Save(stream, GridFileFormat.Csv, Encoding.UTF8, GridSaveOptions.SaveColumnHeaders);
    
        await JSRuntime.InvokeVoidAsync("downloadFromByteArray", new
        {
            ByteArray = stream.ToArray(),
            FileName = "Export",
            ContentType = "text/csv"
        });
    }
    

    Thank you

    Daniel

  • Posted 15 April 2023, 8:21 pm EST

    One more question: Can I change the CSV delimiter from “,” to “;”?

  • Posted 16 April 2023, 10:17 pm EST - Updated 16 April 2023, 10:22 pm EST

    Hi Daniel,

    Currently, there is no direct option for specifying the delimiter while getting the CSV from the grid. By default, the delimiter is “,” so that it could be easily imported in CSV-supported applications like Microsoft Excel.

    You could write your own parser to convert the delimiter from “,” to “;”. Kindly refer to the following code snippet and the attached sample:

        if(fileType === "CSV") {
            var d = {t:`"`,of:`,`,nf:`;`};
            /*
    	        d.t = text delimiter
    	        d.of = old field seperator
    	        d.nf = new field seperator
            */
            var regex = new RegExp("("+d.t+"|^)((\\d*"+d.of+")+)("+d.t+"|\\d*$)", "gmi");
            fileContent = fileContent.replace(regex,(a) => a.replace(new RegExp(d.of,"gmi"),`${d.nf}`));
        }

    In the code snippet, it changes the default delimiter “,” to “;” by replacing the characters from the string.

    Regards,

    Ankit

    Sample: FlexGrid_CSV_Export_Blazor_Server.zip

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels