Quickstart Guide to DHTMLX, and of course, with jQuery.

What is DHTMLX? It is a javascript library with many many useful components. No No No, don’t worry. This is NOT a replacement for jQuery. But a compliment for it.
DHTMLX has components:

Grid
Layout
Trees
Toolbars
Charts
ColorPickers
Editors (I prefer ckeditor though)
Windows
And more…

You can either grab one component and use it or utilize DHTMLX to create an entire web application.

I am going to show you how to start off dhtmlx the easy way for building a layout and attaching html objects to them so you don’t have to create any html, just javascript.

Some people go the hard route of using the dhtmlx library and add each css file and component file that they need for each component. To me this is bad unless you plan on only using one. Here is why. Simple, dhtmlx has an overall css and js file to allow for usage of all items really easy and much cleaner.

HERE ARE THE STEPS:

Download latest FREE DHTMLX SUITE library from dhtmlx.com
Unzip to a location.
Locate the zip dhtmlx_std_full and unzip !!important!!
Move files from the dhtmlx_std_full zip to your site’s directory.
Make sure you are developing through a web server, not through file system. WAMP, XAMP, MAMP or similar. (meaning your URL should say Localhost, NOT C://etc.etc.)
Call them into your html page.
Write code to initialize. (I use this along with the jquery library)

NOTE: You may notice that when you download the suite it has a lot of other folders inside it. Please disregard these for now and just use the dhtmlx_std_full.zip located inside.

First and foremost, I will show you the file structure of what your site should look like.

FILE STRUCTURE:

dhtmlx full suite file structure

Secondly I am going to show you the completed html and javascript for you to copy and paste so you don’t have to read on unless you really want to.

FULLY COMPLETED HTML & JAVASCRIPT:

<!DOCTYPE HTML>
<html>
<head>
<title>How to get down with DHTMLX</title>
<!– DHTMLX CSS –>
<link rel="stylesheet" href="js/dhtmlx/codebase/dhtmlx.css" />
<!– DHTMLX library –>
<script type="text/javascript" src="js/dhtmlx/codebase/dhtmlx.js"></script>
<!– JQUERY library –>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!– Required CSS for dhtmlx layout to work –>
<style type="text/css">
html, body { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
$(function(){
// INIT DHTMLX LAYOUT
var main_layout = new dhtmlXLayoutObject(document.body, '3C');
});
</script>
</head>
<body>
</body>
</html>

Oh, ok. You want to know what that stuff above does, cool.

JAVASCRIPT AND CSS EXTERNAL FILES:

The dhtmlx.css is the all the css for the dhtmlx components.
The dhtmlx.js is all the javascript for the components
The jquery library.

CSS STYLES

The html,body style is necessary for the dhtmlx layout object. It needs what ever element you are attaching the layout to, whether it is the body or a div to have a height and width of 100%. Remove the css and try to load the layout and see what happens.

JAVASCRIPT CODE

Create the jquery dom ready function to wrap the dhtmlx initialization script.
Create a variable to hold a reference to your layout and call a new Layout Object. Passing the parameters of the container and layout type. There are several to choose from, check out the dhtmlx documentation.
The main_layout var is now your layout object. With this you can access the cells, attach other components etc. etc.

EXTRA BONUS FOR THOSE OF YOU WHO KEPT READING:

Let’s add some content to each one of the DHTMLX Layout Cells.

Completed Code (explained below)

$(function(){
	// INIT DHTMLX LAYOUT
	var main_layout = new dhtmlXLayoutObject(document.body, '3J');
 
	var topLeft = main_layout.cells('a');
	var bottomLeft = main_layout.cells('c');
	var Right = main_layout.cells('b');
 
	// Attach an html string
	var myHTMLString = "<div style='margin: 10px; padding: 10px; border: 1px solid red;'>Hi Everyone!! I'm an html string.</div>";
	topLeft.attachHTMLString(myHTMLString);
 
	// Attach html object
	var myObject = document.createElement('div');
	myObject.setAttribute('style','margin: 10px; padding: 10px; border: 1px dashed red;');
	$(myObject).text("Hi Everyone!! I am an html object!");
	bottomLeft.attachObject(myObject);
 
	// Attach URL or Iframe
	var url = "http://eligeske.com";
	Right.attachURL(url);
 
});

FIRST: Let’s assign the layout cells to a variable that will be easier to read.

- You access each cell by the cells() function. Passing into it the cell letter.
- So we give them easy to read names, topLeft, bottomLeft, Right.
- Now we can easily access them.

SECOND: Let’s add some OBJECTS to these dhtmlx cells.

HTML String is added by using the attachHTMLString() function. Put some string containing html and bingo bango!

HTML Object is added by first creating an object or copying one from somewhere else on the page. Then passing that into the attachObject() function. Please be aware that a jQuery object will not work. Unless DHTMLX has updated their code since I have last tried.

URL or IFRAME is added by using the function attachURL() and passing in a web address. Some search engines are not allowing you to use this feature, just an fyi.

IN CLOSING:

I’ve been using the DHTMLX library extensively over the past couple months and have many tricks up my sleeve. So if you have any questions feel free to ask in the comments section below. There will be more to come.

December 18, 2012

Cristhian says:

Thanks for this post, is what I was looking for, for sure if I have any questions I’ll write.
Regards
December 22, 2012

Yves says:

Hello,
Since you’re a jQuery and dhtmlX suite developer, i want to ask you this:
Is it possible in dhtmlxGrid , when you go in Edit mode in a cell (combo or edit style), to let it have the look and feel/behaviour of the jQuery autocomplete such as in http://jqueryui.com/autocomplete/#combobox
Seems like you have to override the internal css of the dhtmlxGrid with jQuery stuff to do this? Or what would you do to give this a try ?
(A nive-to-have would also be that the cell being edited would get rounded corners or a focus on it that simulates that, any idea’s ?)
kind regards Yves

DHTMLX