The DHTMLX grid component is one of the more widely used components of the library. It has a vast amount of settings and abilities that are so robust we could probably write an entire book on them. But since we have an application to build, we will touch on some of the main methods and get into utilizing it.

By the end of this article, we will have a functional grid where we will control the editing, viewing, adding, and removing of users.

The grid methods and events

When creating a DHTMLX grid, we first create the object; second we add all the settings and then call a method to initialize it. After the grid is initialized data can then be added.

The order of steps to create a grid is as follows:

Create the grid object

Apply settings

Initialize

Add data

Now we will go over initializing a grid.

Initialization choices

We can initialize a DHTMLX grid in two ways, similar to the other DHTMLX objects. The first way is to attach it to a DOM element and the second way is to attach it to an existing DHTMLX layout cell or layout.

A grid can be constructed by either passing in a JavaScript object with all the settings or built through individual methods.

Initialization on a DOM element

Let's attach the grid to a DOM element. First we must clear the page and add a div element using JavaScript.

Type and run the following code line in the developer tools console:

document.body.innerHTML = "<div id='myGridCont'></div>";

We just cleared all of the body tags content and replaced it with a div tag having the id attribute value of myGridCont.

Now, create a grid object to the div tag, add some settings and initialize it.

setColTypes

Currently, the grid allows for inline editing if you were to double-click on grid cell. We do not want this for the application. So, we will set the column types to read-only.

Type and run the following code in the console:

myGrid.setColTypes("ro,ro,ro");

Now the cells are no longer editable inside the grid.

getSelectedRowId

The getSelectedRowId method returns the ID of the selected row. If there is nothing selected it will return null.

Type and run the following code line in the console:

myGrid.getSelectedRowId();

clearSelection

The clearSelection method clears all selections in the grid.

Type and run the following code line in the console:

myGrid.clearSelection();

Now any previous selections are cleared.

clearAll

The clearAll method removes all the grid rows. Prior to adding more data to the grid we first must clear it. If not we will have duplicated data.

Type and run the following code line in the console:

myGrid.clearAll();

Now the grid is empty.

parse

The parse method allows the loading of data to a grid in the format of an XML string, CSV string, XML island, XML object, JSON object, and JavaScript array. We will use the parse method with a JSON object while creating a grid for the application.

Here is what the parse method syntax looks like (do not run this in console):

myGrid.parse(data, "json");

Grid events

The DHTMLX grid component has a vast amount of events. You can view them in their entirety in the documentation. We will cover the onRowDblClicked and onRowSelect events.

onRowDblClicked

The onRowDblClicked event is triggered when a grid row is double-clicked. The handler receives the argument of the row ID that was double-clicked. Type and run the following code in console:

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.