Calling Methods
At this stage, we assume you know how to create a basic data grid, pass data in various ways and change the grid's default options.
An interactive grid is cool, but it's not automatically a useful app by itself. DataGridXL really starts to shine when it's used as a piece of something bigger.
That's where calling DataGridXL methods come in! In this article we'll make a "mini data grid app" with undo & redo buttons and a save button that exports the user's grid data to a file.
This way we hope you'll get a feel on how to use DataGridXL methods, so you'll soon be able to start building the web app(s) you've always imagined.
Creating our mini-app
Alright! Let's not waste time; we'll start with our basic HTML structure.
<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>
<script src="https://code.datagridxl.com/datagridxl.js"></script>
<style>
#app {
max-width: 800px;
margin: 0 auto;
}
#toolbar {
display: flex;
justify-content: space-between;
}
#grid {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="app">
<div id="toolbar" class="dgxl-app">
<div class="button-group">
<button id="button-undo">undo</button>
<button id="button-redo">redo</button>
</div>
<div class="button-group">
<button id="button-save">save</button>
</div>
</div>
<div id="grid"></div>
</div>
</body>
</html>We've got a main "wrapper node" <div id="app"> that contains the a custom toolbar and the grid. We have given each toolbar button an id, so we can easily add click listeners later on. <div id="grid"> will serve as our DataGridXL instance container.
Note that we've given the toolbar a class dgxl-app. Normally, your grid (cell selection) is de-activated when clicking outside of your grid. Add the class name dgxl-app to any HTML element that should not de-activate your grid, when clicked inside it.
Let's add our script!
There's only one thing missing from this file, and it's our Javascript. Let's give our user carte blanche by displaying an empty data grid of 10 rows × 10 columns.
// create grid with empty data set of 10 rows * 10 columns
var grid = new DataGridXL("grid", {
data: DataGridXL.createEmptyData(10, 10)
});Now we have our grid, but our buttons are not yet functioning. We have yet to add click event listeners to each button. Luckily, we have given our buttons id attributes, so we can easily target them.
// undo button
document.getElementById("button-undo").onclick = function(){
grid.undo();
}
// redo button
document.getElementById("button-redo").onclick = function(){
grid.redo();
}
// save button
document.getElementById("button-save").onclick = function(){
grid.downloadDataAsCSV();
}
When the undo button is clicked, the grid's undo method is called. When the redo button is clicked, the grid's redo method is called.
When the user clicks save, the data is exported by calling grid.downloadDataAsCSV(). That method has a little sister: grid.downloadDataAsJSON(). Export data in whatever flavor you like!
Hopefully you'll now know how to work with methods. DataGridXL has many methods. Some of these affect selections, others affect the amount of rows or columns, other export data, etc, etc...
Head over to our API section for a complete list of methods.
Further reading
Calling methods is a powerfool tool for building web apps. Become unstoppable by learning how to listen to DataGridXL events.
