{"id":2016,"date":"2013-10-03T17:05:04","date_gmt":"2013-10-03T13:05:04","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2016"},"modified":"2026-01-26T13:22:07","modified_gmt":"2026-01-26T10:22:07","slug":"using-dhtmlxgrid-with-node-js","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-dhtmlxgrid-with-node-js\/","title":{"rendered":"Creating an Editable Grid with DHTMLX and Node.js"},"content":{"rendered":"

Node.js is a flexible JavaScript platform that’s becoming more and more popular these days. In the previous article<\/a>, we have described how it can be used with MongoDB. However, you can use Node.js with relational databases as well. It may require a bit more coding but it still results in a quick and flexible solution. Let\u2019s see how to create an online grid with the help of dhtmlxGrid, JavaScript sortable grid<\/a> component, Node.js, and MySQL database.<\/p>\n

\"Grid<\/p>\n

Download the final demo from GitHub<\/a> or continue reading this tutorial to get the details.<\/p>\n

Creating a Node.js Site<\/h3>\n

 
\nJust like in the previous tutorial, we start from creating a simple Node.js site. We use the Express<\/a> framework and node-mysql<\/a>, an open source Node.js driver for MySQL.<\/p>\n

First, we create a directory called, for example, ‘grid-node’<\/b>, and install the necessary libraries into this directory by running the following command:<\/p>\n

mkdir grid-node
\ncd grid-node
\nnpm install express
\nnpm install mysql@2.0.0-alpha9<\/div><\/div>\n

Then we need to create the base of our demo application. It will be ‘app.js’<\/strong> file in the ‘grid-node’<\/strong> directory with the following content:<\/p>\n

var<\/span> express =<\/span> require(<\/span>'express'<\/span>)<\/span>;<\/span>
\nvar<\/span> path =<\/span> require(<\/span>'path'<\/span>)<\/span>;<\/span>
\n
\n\/\/connect to the MySQL<\/span>
\nvar<\/span> mysql      =<\/span> require(<\/span>'mysql'<\/span>)<\/span>;<\/span>
\nvar<\/span> db =<\/span> mysql.createConnection<\/span>(<\/span>{<\/span>
\n  host     :<\/span> 'localhost'<\/span>,<\/span>
\n  user     :<\/span> 'sampleDB'<\/span>,<\/span>
\n  password :<\/span> 'sampleDB'<\/span>,<\/span>
\n  database :<\/span> 'sampleDB'<\/span>
\n}<\/span>)<\/span>;<\/span>
\n
\n\/\/create express app, use public folder for static files<\/span>
\nvar<\/span> app =<\/span> express(<\/span>)<\/span>;<\/span>
\napp.use<\/span>(<\/span>express.static<\/span>(<\/span>path.join<\/span>(<\/span>__dirname,<\/span> 'public'<\/span>)<\/span>)<\/span>)<\/span>;<\/span>
\n
\n\/\/is necessary for parsing POST request<\/span>
\napp.use<\/span>(<\/span>express.bodyParser<\/span>(<\/span>)<\/span>)<\/span>;<\/span>
\n
\napp.listen<\/span>(<\/span>3000<\/span>)<\/span>;<\/span><\/div><\/div>\n

With the Express framework, our demo app is created with a few lines of code. It doesn’t execute any complex functionality, just serves static files from the ‘public’<\/strong> directory.<\/p>\n

\"Grid<\/p>\n

Next, we create an index.html<\/strong> file in the ‘public’<\/strong> directory. It will be the main page of our demo app that will contain a grid. The content of the index.html<\/strong>:<\/p>\n

<!doctype html><\/span>
\n<head<\/span>><\/span>
\n    <meta<\/span> http-equiv<\/span>=<\/span>"Content-type"<\/span> content<\/span>=<\/span>"text\/html; charset=utf-8"<\/span>><\/span>
\n    <title<\/span>><\/span>Basic initialization<\/<\/span>title<\/span>><\/span>
\n<\/<\/span>head<\/span>><\/span>
\n    <script<\/span> src<\/span>=<\/span>"codebase\/dhtmlxcommon.js"<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/<\/span>script<\/span>><\/span>
\n    <script<\/span> src<\/span>=<\/span>"codebase\/dhtmlxgrid.js"<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/<\/span>script<\/span>><\/span>
\n    <script<\/span> src<\/span>=<\/span>"codebase\/dhtmlxgridcell.js"<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/<\/span>script<\/span>><\/span>
\n    <script<\/span> src<\/span>=<\/span>"codebase\/dhtmlxdataprocessor.js"<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/<\/span>script<\/span>><\/span>
\n
\n    <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"codebase\/dhtmlxgrid.css"<\/span> type<\/span>=<\/span>"text\/css"<\/span> media<\/span>=<\/span>"screen"<\/span> title<\/span>=<\/span>"no title"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n    <link<\/span> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"codebase\/skins\/dhtmlxgrid_dhx_skyblue.css"<\/span> type<\/span>=<\/span>"text\/css"<\/span> media<\/span>=<\/span>"screen"<\/span> title<\/span>=<\/span>"no title"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n
\n<script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> charset<\/span>=<\/span>"utf-8"<\/span>><\/span>
\n    function init() {
\n        mygrid = new dhtmlXGridObject("grid_here");
\n        mygrid.setImagePath("..\/..\/codebase\/imgs\/");
\n        mygrid.setHeader("Sales, Author, Title, Price");
\n        mygrid.setColumnIds("sales,author,title,price");
\n        mygrid.setInitWidths("70,150,*,70");
\n        mygrid.setColTypes("dyn,ed,ed,ed");
\n        mygrid.setColSorting("int,str,str,int");
\n        mygrid.setSkin("dhx_skyblue");
\n        mygrid.init();
\n    }
\n<\/<\/span>script<\/span>><\/span>  
\n
\n<body<\/span> onload<\/span>=<\/span>"init();"<\/span>><\/span>
\n    <div<\/span> id<\/span>=<\/span>"grid_here"<\/span> style<\/span>=<\/span>"width:550px; height:150px;"<\/span>><\/<\/span>div<\/span>><\/span>
\n<\/<\/span>body<\/span>><\/span><\/div><\/div>\n

This is the minimum HTML code needed for working with dhtmlxGrid. The JavaScript files included at the top of the code contain dhtmlxdataprocessor.js, which is not required for basic grid initialization but will be used later for data saving.<\/p>\n

If you would like to check what we’ve got, you can start the nodejs server and open http:\/\/localhost:3000 address in a browser (to start nodejs server, run “nodejs app.js” command). If everything is done correctly, you will see an empty grid. <\/p>\n

\"Grid<\/p>\n

Loading Data in Grid<\/h3>\n

 
\nNow we need to fill our grid with data and add some records in it. First, we load data dump in the database:<\/p>\n

CREATE TABLE IF NOT EXISTS `books` (<\/span>
\n  `id` int<\/span>(<\/span>11<\/span>)<\/span> NOT NULL AUTO_INCREMENT,<\/span>
\n  `sales` int<\/span>(<\/span>11<\/span>)<\/span> NOT NULL,<\/span>
\n  `author` varchar(<\/span>255<\/span>)<\/span> CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,<\/span>
\n  `title` varchar(<\/span>255<\/span>)<\/span> CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,<\/span>
\n  `price` decimal(<\/span>8<\/span>,<\/span>2<\/span>)<\/span> NOT NULL,<\/span>
\n  PRIMARY KEY (<\/span>`id`)<\/span>
\n)<\/span> ENGINE=<\/span>InnoDB AUTO_INCREMENT=<\/span>9<\/span> ;<\/span>
\n
\nINSERT INTO `books` (<\/span>`id`,<\/span> `sales`,<\/span> `author`,<\/span> `title`,<\/span> `price`)<\/span> VALUES
\n(<\/span>1<\/span>,<\/span> 450<\/span>,<\/span> 'Jon Duckett'<\/span>,<\/span> 'HTML and CSS: Design and Build Websites'<\/span>,<\/span> 16.79<\/span>)<\/span>,<\/span>
\n(<\/span>3<\/span>,<\/span> -<\/span>800<\/span>,<\/span> 'Steve Krug'<\/span>,<\/span> 'Don'<\/span>'t Make Me Think'<\/span>,<\/span> 40.95<\/span>)<\/span>,<\/span>
\n(<\/span>4<\/span>,<\/span> 800<\/span>,<\/span> 'Douglas Crockford'<\/span>,<\/span> 'JavaScript: The Good Parts'<\/span>,<\/span> 15.59<\/span>)<\/span>,<\/span>
\n(<\/span>5<\/span>,<\/span> 1250<\/span>,<\/span> 'John Resig'<\/span>,<\/span> 'Secrets of the JavaScript Ninja'<\/span>,<\/span> 23.99<\/span>)<\/span>;<\/span><\/div><\/div>\n

After that, we add one more handler to app.js<\/b>:<\/p>\n

app.get<\/span>(<\/span>'\/data'<\/span>,<\/span> function<\/span>(<\/span>req,<\/span> res)<\/span>{<\/span>
\n    db.query<\/span>(<\/span>"SELECT * FROM books"<\/span>,<\/span> function<\/span>(<\/span>err,<\/span> rows)<\/span>{<\/span>
\n        if<\/span> (<\/span>err)<\/span> console.log<\/span>(<\/span>err)<\/span>;<\/span>
\n
\n        res.send<\/span>(<\/span>rows)<\/span>;<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

This new handler will be used to load data in the grid. Here we choose all records from the database and send them to the client-side as JSON structure. The code is quite straight and simple. As our table has ID field called “id”, we don’t need to apply any transformations to the data.<\/p>\n

There are also some changes required in the index.html<\/strong> file:<\/p>\n

mygrid.init<\/span>(<\/span>)<\/span>;<\/span>
\nmygrid.load<\/span>(<\/span>"\/data"<\/span>,<\/span> "js"<\/span>)<\/span><\/div><\/div>\n

We have added one more line that initiates data loading using the url described above. “Load” command defines data format (the second parameter) as “js”. It allows loading data in unified JSON format. The grid will map data from JSON to columns depending on column IDs (we’ve set IDs earlier with setColumnIds command).<\/p>\n

If we now restart the server and open http:\/\/localhost:3000 in a browser, we will see our grid with a few rows loaded from the database.<\/p>\n

Add, Delete, Edit Records in Grid<\/h3>\n

 
\nNow we need to make the grid editable, which means the end users will be able to add\/delete\/edit grid records and these changes will be automatically saved to the database. <\/p>\n

First, we add UI for data operations in the client-side code of index.html<\/strong>. The following code will add two buttons to create\/remove rows:<\/p>\n

<body<\/span> onload<\/span>=<\/span>"init();"<\/span>><\/span>
\n    <div<\/span> id<\/span>=<\/span>"grid_here"<\/span> style<\/span>=<\/span>"width:550px; height:150px;"<\/span>><\/<\/span>div<\/span>><\/span>
\n    <br<\/span>><\/span>
\n    <input<\/span> style<\/span>=<\/span>"padding:6px;"<\/span> type<\/span>=<\/span>"button"<\/span> value<\/span>=<\/span>"Add a new record"<\/span> onclick<\/span>=<\/span>"addrow()"<\/span>><\/span>
\n    <input<\/span> style<\/span>=<\/span>"padding:6px;"<\/span> type<\/span>=<\/span>"button"<\/span> value<\/span>=<\/span>"Delete the selected record"<\/span> onclick<\/span>=<\/span>"deleterow()"<\/span>><\/span>
\n<\/<\/span>body<\/span>><\/span><\/div><\/div>\n

Then, we add the code that initializes dataprocessor in the same index.html<\/strong> file:<\/p>\n

 function<\/span> init(<\/span>)<\/span> {<\/span>
\n        \/* ... skipping the previously added code ... *\/<\/span>
\n
\n        var<\/span> dp =<\/span> new<\/span> dataProcessor(<\/span>"\/data"<\/span>)<\/span>;<\/span>
\n        dp.init<\/span>(<\/span>mygrid)<\/span>;<\/span>
\n        dp.enableDataNames<\/span>(<\/span>true<\/span>)<\/span>;<\/span>
\n        dp.setTransactionMode<\/span>(<\/span>"POST"<\/span>,<\/span> false<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n    function<\/span> addrow(<\/span>)<\/span>{<\/span>
\n        var<\/span> id =<\/span> mygrid.uid<\/span>(<\/span>)<\/span>;<\/span>
\n        mygrid.setActive<\/span>(<\/span>true<\/span>)<\/span>;<\/span>
\n        mygrid.addRow<\/span>(<\/span>id,<\/span> "100,New Author,New Book"<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n    function<\/span> deleterow(<\/span>)<\/span>{<\/span>
\n        mygrid.deleteSelectedRows<\/span>(<\/span>)<\/span>;<\/span>
\n    }<\/span><\/div><\/div>\n

As you can see, after initialization of the dataprocessor, we have issued a couple of extra commands:<\/p>\n

Then we create a ‘public’<\/strong> directory. Download dhtmlxGrid Standard<\/a> (open source, GPL) and unpack the folder ‘codebase’<\/strong> from the Grid\u2019s package into the ‘public’<\/strong> directory. After that, the whole files structure will look like this:<\/p>\n