Import Excel into FlexGrid

This section shows how to call the Web API service project through client application and add import function to enable importing Excel data into FlexGrid control.

Step 1: Call the Service

Step 2: Run the Client Project

The following image shows how the FlexGrid appears after completing the steps above:

Step 1: Call the Service

Complete the following steps to call the Web API service.

Add C1 Web API Client JavaScript file and its reference to your MVC or HTML project (For further details refer to C1 Web API Client JavaScript) to the project.

Add import functionality, using Client JavaScript Helper, which will be triggered on button click event.

MVC
HTML

Add the following code to Views|MVCFlexGrid|Index.cshtml to import excel data into FlexGrid control.

Index.cshtml	Copy Code
<script type="text/javascript"> var gridcontrol; c1.mvc.Utils.documentReady(function () { gridcontrol = wijmo.Control.getControl('#flexGrid') }); function importFlex() { var file = document.getElementById("fileInput").files[0]; var importer = new wijmo.grid.ExcelImporter(); importer.requestImport(gridcontrol, "http://demos.componentone.com/ASPNET/C1WebAPIService/api/import/excel", file, true) } </script>

Index.cshtml

Copy Code

<script type="text/javascript">
    var gridcontrol;
    c1.mvc.Utils.documentReady(function () {
        gridcontrol = wijmo.Control.getControl('#flexGrid')
    });
    function importFlex() {
    var file = document.getElementById("fileInput").files[0];
    var importer = new wijmo.grid.ExcelImporter();
    importer.requestImport(gridcontrol,
    "http://demos.componentone.com/ASPNET/C1WebAPIService/api/import/excel", file, true)
    }
</script>

Add the following markup in <script> tags to import excel data into FlexGrid control.

JavaScript	Copy Code
<script> var grid; $(document).ready(function() { grid = wijmo.Control.getControl('#TheGrid') }); function importFlex() { var file = document.getElementById("fileInput").files[0]; var importer = new wijmo.grid.ExcelImporter(); importer.requestImport(grid, "http://demos.componentone.com/ASPNET/WebAPI/api/import/excel", file, true) } </script>

JavaScript

Copy Code

<script>
var grid;
$(document).ready(function() {
  grid = wijmo.Control.getControl('#TheGrid')
});
function importFlex() {
  var file = document.getElementById("fileInput").files[0];
  var importer = new wijmo.grid.ExcelImporter();
  importer.requestImport(grid,
  "http://demos.componentone.com/ASPNET/WebAPI/api/import/excel",
  file, true)
}
</script>

Note: To use Wijmo 5 controls in your HTML application, you need to include references to few Wijmo files in your HTML pages. You may either download these wijmo files and copy them to appropriate folders in your application, or reference Wijmo files hosted in cloud on our Content Delivery Network (CDN). If you download and place the Wijmo script files in a folder named "Scripts", css files in a folder named "Styles", and script files specific to Wijmo controls to "Controls" folder, then add the following references within <head> tags of your HTML pages:

HTML

Copy Code

<script src="Controls/wijmo.min.js" type="text/javascript"></script>
<link href="Styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="Scripts/webapiclient.min.js" type="text/javascript"></script>

Provide an input control, for example button, to initiate import request in client application.

MVC
HTML

Add the following code in Views | MVCFlexGrid | Index.cshtml to add buttons for export and import functionalities.

Add the following code in Views | MVCFlexGrid | Index.cshtml to add buttons for import functionality.

Index.cshtml	Copy Code
<div> <span>Import</span> <input type="file" value="Import" id="fileInput" class="upload" onchange="importFlex()" /> </div>

Add the following markup within the <body> tags to add button for import functionality.

HTML	Copy Code
<div id="TheGrid" style="width:auto"></div> <br /> <input type="file" id="fileInput" class="upload" onchange="importFlex()" />

Step 2: Run the Client Project

MVC Application

Click Build | Build Solution to build the project.
Press F5 to run the project.

HTML Application

Save your HTML file and open it in a browser.

A button to select file to be imported appears along with the control, in the output. Use this button to import data from the desired file into the control.

Explore detailed demo samples of import service for MVC and Wijmo5 FlexGrid control in: