Blazor | ComponentOne
Controls / FlexGrid / Exporting Data
In This Topic
    Exporting Data
    In This Topic

    FlexGrid allows you to export the grid data into supported file formats such as HTML, CSV, and TXT files. FlexGrid uses the Save method which accepts the file name or stream and file format as parameters to save the grid data at the server side. The file or stream can also be downloaded at the client side using the appropriate client script. The below image displays the FlexGrid with enabled support to export the data in supported file formats.

     

    Export

     

    To implement the Export feature in your FlexGrid application using code, you can follow the steps mentioned below.

    1. Define a method to export FlexGrid data to supported file formats and download the saved file at the client side.
      public void exportFlexGrid(string fileName,GridFileFormat format)
          {
              var _fileNameWithExtn = fileName+"." + format.ToString();
              var stream = new MemoryStream();
              grid.Save(stream, format);
              /* Uncomment following code line to download the saved file on client side */
              //JsRuntime.InvokeAsync<object>("saveAsFile", _fileNameWithExtn ,stream.ToArray()).AsTask();
          }   
      
    2. Write the following JavaScript function in the _Host.cshtml file to download the exported file at the client side.
      <script>
              function saveAsFile(filename, bytesBase64) {
                  var link = document.createElement('a');
                  link.download = filename;
                  link.href = "data:application/octet-stream;base64," + bytesBase64;
                  document.body.appendChild(link); // Needed for Firefox
                  link.click();
                  document.body.removeChild(link);
              }
          </script>
      
    3. Now, you have to invoke the Save method to export the FlexGrid data on a button click as shown in the image above.
          <button class="btn btn-primary" @onclick="@(e=> exportFlexGrid("FlexGrid",GridFileFormat.html))">Html</button>