 |
VOOZH | about |
|
VOOZH | about |
Wijmo FlexGrid is a lightweight, high-performance JavaScript datagrid for creating responsive, interactive data applications.
With the CData API Server and the XML Connector (or any of the hundreds of available connectors), you can quickly create APIs that expose live data from multiple sources, using industry standards like OData and Swagger for seamless integration with client-side and server-side controls in Wijmo's FlexGrid.
In this article, we'll use the Wijmo FlexGrid JavaScript components to build a simple HTML page that lets you select tables and columns from XML and display the data.
Let's get started!
Here's a quick overview of the steps we'll follow:
If you haven't already, download an installer for your machine from the CData API Server page. Follow the installation instructions to complete the setup.
Once installed, you can start the server in the following ways:
When your Wijmo Grid application and the CData API Server are hosted on different domains, CORS (Cross-Origin Resource Sharing) must be enabled. To enable CORS in the API Server:
CData Drivers let you work with XML files stored locally and stored in cloud storage services like Box, Amazon S3, Google Drive, or SharePoint, right where they are.
Set the URI property to local folder path.
To connect to XML file(s) within Amazon S3, set the URI property to the URI of the Bucket and Folder where the intended XML files exist. In addition, at least set these properties:
To connect to XML file(s) within Box, set the URI property to the URI of the folder that includes the intended XML file(s). Use the OAuth authentication method to connect to Box.
To connect to XML file(s) within Dropbox, set the URI proprerty to the URI of the folder that includes the intended XML file(s). Use the OAuth authentication method to connect to Dropbox. Either User Account or Service Account can be used to authenticate.
To connect to XML file(s) within SharePoint with SOAP Schema, set the URI proprerty to the URI of the document library that includes the intended XML file. Set User, Password, and StorageBaseURL.
To connect to XML file(s) within SharePoint with REST Schema, set the URI proprerty to the URI of the document library that includes the intended XML file. StorageBaseURL is optional. If not set, the driver will use the root drive. OAuth is used to authenticate.
To connect to XML file(s) within Google Drive, set the URI property to the URI of the folder that includes the intended XML file(s). Use the OAuth authentication method to connect and set InitiateOAuth to GETANDREFRESH.
The property is the controlling property over how your data is represented into tables and toggles the following basic configurations.
See the Modeling XML Data chapter for more information on configuring the relational representation. You will also find the sample data used in the following examples. The data includes entries for people, the cars they own, and various maintenance services performed on those cars.
To allow secure access to the created OData endpoints, create and configure Users in the API Server.
Once a user is added, an Authtoken is automatically generated. This token can be used in API requests as a secure authentication method instead of a password.
You can also refresh the Authtoken, disable it, or set expiration rules (e.g., number of days until expiry) by enabling the Token Expiration option in the user settings.
👁 'Authtoken' Settings for the Added User in CData API ServerTo make data from XML accessible in Wijmo Grid via OData, you need to expose your desired tables through the API Server. Here's how:
Now that your API is configured, Wijmo FlexGrid can connect to the OData endpoints to display live data. Below are the URL formats for OData endpoints that you can use:
| Endpoint | URL | |
|---|---|---|
| Entity List | http://address:port/api.rsc/ | |
| Table Metadata (e.g., albums) | http://address:port/api.rsc/albums/$metadata?@json | |
| Table Data (e.g., albums) | http://address:port/api.rsc/albums |
These OData endpoints are now ready to be directly consumed in Wijmo FlexGrid using the URL. Since Wijmo FlexGrid supports OData, you can easily bind live data from XML and create dynamic, interactive grids.
The CData API Server supports full OData filtering capabilities. For custom queries and filtered visualizations, you can append standard OData query parameters like $select, $filter, $orderby, $top, and $skip to your requests.
You've got the CData API Server up and running now with consumable OData endpoints from your XML data. Now let's build a simple Wijmo FlexGrid that lets you select tables and columns and view your data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wijmo Grid with CData API Server</title>
<!-- Wijmo styles -->
<link href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet" />
<!-- Wijmo core and controls -->
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.odata.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #00A0FF;
text-align: center;
}
#selectors {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
align-items: flex-start;
margin-bottom: 20px;
}
.select-group {
display: flex;
flex-direction: column;
min-width: 200px;
}
label {
font-weight: bold;
margin-bottom: 5px;
color: #00A0FF;
}
select, button {
padding: 6px;
font-size: 14px;
border: 1px solid #00A0FF;
border-radius: 4px;
}
button {
background: #00A0FF;
color: white;
cursor: pointer;
height: 40px;
margin-top: 24px;
}
#columnsContainer {
display: flex;
flex-direction: column;
gap: 5px;
max-height: 150px;
overflow-y: auto;
border: 1px solid #00A0FF;
padding: 8px;
border-radius: 4px;
}
#theGrid {
margin-top: 20px;
border: 2px solid #00A0FF;
height: 500px;
}
.wj-header {
background: #00A0FF !important;
color: white !important;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Simple Wijmo Grid with CData API Server</h1>
<div id="selectors">
<div class="select-group">
<label for="tableSelect">Select Table</label>
<select id="tableSelect"></select>
</div>
<div class="select-group">
<label>Select Columns</label>
<div id="columnsContainer"></div>
</div>
<div>
<button onclick="loadGrid()">Load Grid</button>
</div>
</div>
<div id="theGrid"></div>
<script>
const username = 'yourUsername';
const password = 'yourPassword';
const authHeader = 'Basic ' + btoa(username + ':' + password);
const serviceUrl = 'Your_CData_API_Server_URL';
fetch(serviceUrl + '/$metadata', { headers: { Authorization: authHeader } })
.then(res => res.text())
.then(text => {
const parser = new DOMParser();
const xml = parser.parseFromString(text, 'application/xml');
const tables = [...xml.getElementsByTagName('EntityType')];
const select = document.getElementById('tableSelect');
tables.forEach(t => {
const name = t.getAttribute('Name');
const option = document.createElement('option');
option.value = name;
option.textContent = name;
select.appendChild(option);
});
loadColumns(); // load columns for the first table
});
document.getElementById('tableSelect').addEventListener('change', loadColumns);
function loadColumns() {
const table = document.getElementById('tableSelect').value;
fetch(serviceUrl + '/$metadata', { headers: { Authorization: authHeader } })
.then(res => res.text())
.then(text => {
const parser = new DOMParser();
const xml = parser.parseFromString(text, 'application/xml');
const entity = [...xml.getElementsByTagName('EntityType')].find(t => t.getAttribute('Name') === table);
const columns = [...entity.getElementsByTagName('Property')];
const container = document.getElementById('columnsContainer');
container.innerHTML = '';
columns.forEach(col => {
const name = col.getAttribute('Name');
const div = document.createElement('div');
div.innerHTML = `<label><input type="checkbox" value="${name}" checked> ${name}</label>`;
container.appendChild(div);
});
});
}
function loadGrid() {
const table = document.getElementById('tableSelect').value;
const selectedCols = [...document.querySelectorAll('#columnsContainer input:checked')].map(i => i.value);
const odata = new wijmo.odata.ODataCollectionView(serviceUrl, table, {
requestHeaders: { Authorization: authHeader }
});
const grid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource: odata,
autoGenerateColumns: false,
columns: selectedCols.map(col => ({ binding: col, header: col })),
selectionMode: 'CellRange',
allowSorting: true
});
}
</script>
</body>
</html>
It's that simple. You can build even more complex applications and grids with Wijmo FlexGrid and the CData API Server by connecting to live data from XML.
Check out the various frameworks supported by Wijmo at https://developer.mescius.com/wijmo.
Experience how easy it is to create live, flexible OData APIs for your Wijmo FlexGrid applications with a free 30-day trial of the CData API Server. Quickly connect to live data from XML and hundreds of other sources, enabling dynamic, real-time grids without manual data movement.
Learn more or sign up for a free trial:
CData API Server