Calling Methods

NOTE DataGridXL requires a commercial license.

At this stage, we assume that 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 part of something bigger.

That's where DataGridXL methods come in! In this article we'll make a mini "spreadsheet" app with undo & redo buttons and a couple of save buttons to export the user's table 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 your very own DataGridXL-powered web app.

We're using simple <script> tags for this example, but ES6 modules will work just as well.

Creating our mini-app

Alright! Let's not waste time; we'll start with our basic HTML structure.

html

<!DOCTYPE html>
<html>
<head>
    <title>My Web App</title>
    <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>
    <script src="/scripts/DataGridXL3.script.js"></script>
</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.

const 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.downloadCSV();
}

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.downloadCSV(). That method has a little sister: grid.downloadJSON(). Export data in whatever flavor you like!

Result

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.

Calling Methods

Creating our mini-app

Let's add our script!

Further reading