The DHTMLX Grid

Exclusive offer: get 50% off this eBook here
Learning DHTMLX Suite UI

Learning DHTMLX Suite UI — Save 50%

Create your first single-page JavaScript application using multiple DHTMLX components and a touch of HTML5 with this book and ebook

$17.99    $9.00
by Eli Geske | October 2013 | Web Development

This article written by Eli Geske author of the book, Learning DHTMLX Suite UI. In this article, we will learn about the DHTMLX grid component covering the different initializations, events, methods, and settings. We will then add a grid to the application that will control the user data.

All changes done in this article will occur inside the app.js file.

In this article, we will start adding code to the callbacks object and use the storage object for the first time.

(For more resources related to this topic, see here.)

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.

Some of the cool features that the grid supports is filtering, spanning rows and columns, multiple headers, dynamic scroll loading, paging, inline editing, cookie state, dragging/ordering columns, images, multi-selection, and events.

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:

  1. Create the grid object
  2. Apply settings
  3. Initialize
  4. 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.

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

var myGrid = new dhtmlXGridObject("myGridCont"); myGrid.setImagePath(config.imagePath); myGrid.setHeader(["Column1", "Column2", "Column3"]); myGrid.init();

You should see the page with showing just the grid header with three columns.

Next, we will create a grid on an existing cell object.

Initialization on a cell object

Refresh the page and add a grid to the appLayout cell.

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

var myGrid = appLayout.cells("a").attachGrid(); myGrid.setImagePath(config.imagePath); myGrid.setHeader(["Column1","Column2","Column3"]); myGrid.init();

You will now see the grid columns just below the toolbar.

Grid methods

Now let's go over some available grid methods. Then we can add rows and call events on this grid.

For these exercises we will be using the global appLayout variable.

Refresh the page.

attachGrid

We will begin by creating a grid to a cell.

The attachGrid method creates and attaches a grid object to a cell. This is the first step in creating a grid.

Type and run the following code line in the console:

var myGrid = appLayout.cells("a").attachGrid();

setImagePath

The setImagePath method allows the grid to know where we have the images placed for referencing in the design. We have the application image path set in the config object.

Type and run the following code line in the console:

myGrid.setImagePath(config.imagePath);

setHeader

The setHeader method sets the column headers and determines how many headers we will have. The argument is a JavaScript array.

Type and run the following code line in the console:

myGrid.setHeader(["Column1", "Column2", "Column3"]);

setInitWidths

The setinitWidths method will set the initial widths of each of the columns. The asterisk mark (*) is used to set the width automatically.

Type and run the following code line in the console:

myGrid.setInitWidths("125,95,*");

 

setColAlign

The setColAlign method allows us to align the column's content position.

Type and run the following code line in the console:

myGrid.setColAlign("right,center,left");

init

Up until this point, we haven't seen much going on. It was all happening behind the scenes. To see these changes the grid must be initialized.

Type and run the following code line in the console:

myGrid.init();

Now you see the columns that we provided.

addRow

Now that we have a grid created let's add a couple rows and start interacting.

The addRow method adds a row to the grid. The parameters are ID and columns.

Type and run the following code in the console:

myGrid.addRow(1,["test1","test2","test3"]); myGrid.addRow(2,["test1","test2","test3"]);

We just created two rows inside the grid.

setColTypes

The setColTypes method sets what types of data a column will contain.

The available type options are:

  • ro (readonly)
  • ed (editor)
  • txt (textarea)
  • ch (checkbox)
  • ra (radio button)
  • co (combobox)

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:

myGrid.attachEvent("onRowDblClicked", function(rowId){ console.log(rowId); });

Double-click one of the rows and the console will log the ID of that row.

onRowSelect

The onRowSelect event will trigger upon selection of a row.

Type and run the following code in console:

myGrid.attachEvent("onRowSelect", function(rowId){ console.log(rowId); });

Now, when you select a row the console will log the id of that row. This can be perceived as a single click.

Summary

In this article, we learned about the DHTMLX grid component. We also added the user grid to the application and tested it with the storage and callbacks methods.

Resources for Article:


Further resources on this subject:


Learning DHTMLX Suite UI Create your first single-page JavaScript application using multiple DHTMLX components and a touch of HTML5 with this book and ebook
Published: October 2013
eBook Price: $17.99
Book Price: $29.99
See more
Select your format and quantity:

About the Author :


Eli Geske

Eli Geske is an entrepreneurial graphics designer turned programmer. He has been involved in web applications from creating and enhancing online gaming communities, to building applications that improve company's efficiency. He has also invented products, put in for patents, and pushed them to market. His programming skills range from JavaScript, PHP, and C# which he uses in the medical industry, payment processing industry, and on custom order management sites. He also has a degree in computer science, focusing on networking and web server administration.

His knowledge of DHTMLX springs from his daily engagements in a current large scale medical application.

Some other of Eli's writings and public offerings can be viewed on his blog www.eligeske.com or on eligeske.github.com.

Books From Packt


HTML5 Canvas Cookbook
HTML5 Canvas Cookbook

HTML5 Multimedia Development Cookbook
HTML5 Multimedia Development Cookbook

HTML5 Games Development by Example: Beginner’s Guide
HTML5 Games Development by Example: Beginner’s Guide

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

HTML5 Data and Services Cookbook
HTML5 Data and Services Cookbook

HTML5 Graphing and Data Visualization Cookbook
HTML5 Graphing and Data Visualization Cookbook

Instant HTML5 2D Platformer [Instant]
Instant HTML5 2D Platformer [Instant]

Instant HTML5 Presentations How-to [Instant]
Instant HTML5 Presentations How-to [Instant]


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
G
w
X
z
r
5
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software