Wrappers for Suite Components from an AngularJS Fan

Emanuil Glavchev made an important contribution that many dhtmlx users were looking for. He has created wrappers for some of the DHTMLX library controls that enables using it with AngularJS Framework. So, most popular Suite controls, such as Grid, Tree, Layout, Form and more other can be now easily used in your Angular + DHTMLX projects.


Continue reading to learn about Emanuil’s contribution and the work he has done.

“What these directives represent are the wrappers for some of the DHTMLX JavaScript UI widgets. As I require more of them I add more to the project. Each directive provides an interface to the underlying dhtmlx components. That interface in most cases does not encompass the complete API. I’ve handled the issue in 2 ways: one is letting the directive user get access to the underlying object at important times in its lifetime (in order to manually configure it additionally, or manipulate its data), whereas another way is registering the object in the controller scope usually via the dhxObj/dhx-obj attribute.

Find the described wrappers on GitHub

Despite that, I try to include in the directives interface all that I’m likely going to need most of the time. This is done because I mostly use DHTMLX+Angular.js for fast creation of prototype web applications, and it is really much easier when a component can be fully defined in the template without requiring additional code configuration in the controller other than attaching the actual data, which for prototyping purposes can also be often inlined in the template.

I’ve tried to add comments where absolutely necessary, however usually I stick quite close to the actual DHTMLX Api of the underlying components, which means of course you need to have DHTMLX handy. I find it important that for each directive, a demo exists in this application. This serves 2 purposes.

First it serves as a sort of environment in which all the directives can be easily tested. Secondly, the very application showcases the directive code, as well as the actual demo code that gets executed before one’s eyes. That makes the demo app not only into a testing environment, but also a sort of handbook, to which I often refer to remember how the directives are used. Naturally, as I add more directives or expand the functionality of the existing ones, I will update the demos accordingly to reflect this new functionality.

Final Note: Not being a professional Javascript/Angular.js developer, I do not claim to follow completely the established good principles of design, functionality and codestyle, but always remain open to correction and improvement. If anyone feels like they have something to add to any part of this and they want to share their knowhow, they will be most welcome.”

Note that to use it in commercial projects, you need to obtain appropriate license.

We want to thank Emanuil Glavchev one more time. You may find Angular+DHTMLX demos here. You are welcome to leave your comments and suggestions!


Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components