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:
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:
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:
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>
JAVASCRIPT AND CSS EXTERNAL FILES:
CSS STYLES
JAVASCRIPT CODE
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.
Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.
How often do you work with tables? I work with them quite a bit and styling t read more...
UPDATE!! A plugin is now available for this tutorial that includes more features read more...
When running a site with a boat load of javascript, you may want to run a script read more...
There seems to be a lot of misconceptions on the difference between the document read more...
Greetings All! Since everyone was digging the Star Comment Rating I decided that read more...
Thanks for this post, is what I was looking for, for sure if I have any questions I’ll write.
Regards
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