DHTMLX suite is a JavaScript GUI widget library

DHTMLX suite is a JavaScript GUI widget library that helps in building enterprise and mobile applications. This library allows you to quickly create great looking application with lots of features. It provides skins that will make your applications look clean and professional and also gives you the ability to customize the skin colors to make it look however you want. DHTMLX has a modular architecture that allows the use of its components separately or by combining them on one JavaScript file.

Advantages of using DHTMLX suite and helpful features.

Cross-browser Compatibility - DHTMLX suite works in all modern browsers including Chrome, Firefox, Internet Explorer, Opera, and Safari giving users the opportunity to access the library on different browser where they are most comfortable.

Great Tools – As the web development industry continues to grow and change, clients' demands are become more sophisticated. This makes the need for a library that has all the components that we need for building modern applications even larger. DHTMLX suite offers handy and very useful features that will that will surely fit your needs and help you build your applications.

Can Work with IDE’s – DHTMLX gives us the option to integrate its components using some of the most popular IDE’s such as PHPStorm | WebStorm (JetBrain IDEs), Aptana Studio, Eclipse, Adobe Dreamweaver, Komodo IDE and Komodo Editor, Visual Studio 2010 | Visual Studio 2008 and NetBeans 7. We can now enjoy and add these components that will help add interactivity to our applications.

Rich in UI components - DHTMLX provides over 20 customizable widgets that helps user to create their own interfaces. 

Visual Designer Tool – The library also offers a Visual Designer Tool that makes web application implementation run smoother.  With this tool, you can control event handlers, set interface structures, arrange UI elements etc., without writing any code. This is very advantageous to designers and even people with less coding experience.

Below are some of the components that DHTMLX library offers.

Form-oriented Components - This component is composed of Form, Editor, Color Picker, Slider, Calendar and Combo. These are components that are familiar to most developers and are easy to learn and work with. With these built in and predefined components, you can easily create and define the above mentioned form types faster, with style and confidence.

Example dhtmlXForm API method(addItem) snippet

void addItem(mixed pId,object itemData,number pos,number insertAfter);

addItem() - adds an item on the form

Parameters

pId mixed represents parent item's id.

itemData the object of a new item

pos number refers to position where the new item will be added

insertAfter refers to the position of the item after a new item will be inserted

- to add as an individual item(addItem)

myCustomForm.addItem(null, itemData, pos, insertAfter);

- to nest into some existing item

myCustomForm.addItem(pid, itemData, pos, insertAfter);

Example dhtmlXEditor API method(attachEvent) snippet

attachEvent() - adds user-defined handler to available events

number attachEvent(string name,function handler);

Parameters

name  represents the name of event

handler  refers to user-defined event handler

- to attach event

var event_id = myCustomComponent.attachEvent("eventName", function(){

    // some logics

});

- to detach event

myCustomComponent.detachEvent(event_id);

Data Components – These are components composed of Grid, Chart, TreeView, DataView and List. With these, we can display data in an organized and detailed manner.

Example dhtmlXGrid API method(addRow) snippet

addRow() - use to add a row to a grid

void addRow(number/string id,number/string text,number/string indx);

Parameters

id row ID, must be unique

text row values

indx index of the new row

var indx1 = window.prompt('First cell','');

if (indx1 === null || typeof indx1 == "undefined") return;

var indx2 = window.prompt('Second cell','');

if (indx2 === null || typeof indx2 == "undefined") return;

var indx3 = window.prompt('Third cell','');

if (indx3 === null || typeof indx3 == "undefined") return;

myCustomGrid.addRow(myGrid.uid(),[indx1,indx2,indx3],1);

Layouts – This allow users to organize web pages and controls through animations or navigations.

Navigation Components - Allows for the creating navigation/menu items on web pages.

Macro Components and Tools - Allows users to create interaction with library handlers and also lets users to work with datasets and file systems.

Server-side Solutions - Allows users to save PHP, Java, .NET, ColdFusion and ready-to-use solutions for data loading.

Extensions and Helpers -Allows users to add features to their applications and present task oriented UI extensions.

With these references and component features, developers will definitely be able to make modern, user friendly applications that have multiple controls and lots of features. 

Rich in Documentation - DHTMLX suite documentation covers all functionalities and workings of the library. It provides sample code snippets and useful tutorials that make developing your first app with DHTMLX suite very easy. Over 1000 examples explaining its methods and functions were created giving users all they need to learn the technology thoroughly.

Connector/ Server-Side Integration - One of the coolest feature of DHTMLX suite is that it allows connections between some popular PHP frameworks such as Codeigniter, CakePHP, Laravel, Yii but also with other languages such as Java, ASP.NET and Cold fusion. This enables developers to apply DHTMLX suite library components to different PHP frameworks or other popular programming languages mentioned above where they can use them comfortably.

Example snippet connection(Laravel)

$connector = new GridConnector(null, "PHPLaravel");

$connector->configure(new SchedulerEvent(),"event_id","start_date,end_date,event_name");

$connector->render();

Assuming we've already added the DHTMLX suite on our Laravel application, the above code shows how the connection was implemented.

DHTMLX also works with node.js that gives real-time updates of data or other information from your application.

Support - One of the advantage of this library is accessible support. You can always participate in its forums on how DHTMLX extensions works and how it will be implemented on your application giving you an opportunity to be exposed to new ideas from experienced programmers. It also has support centers where if you are an eligible customer or have an active subscription, you can always reach out to them whenever you need help. All DHTMLX components were developed by the DHTMLX team, hence giving you the assurance that you will be provided with a complete and detailed resolution whenever a problem occurs with building your application.

Conclusion

There's a lot more that can be done with DHTMLX suite library that will really benefit users in building applications. With its comprehensive tools, it makes application development faster, easier and done with style. This power tool makes it easy for end users to learn and create their applications on their own and will boost their confidence to learn other more complex web development tools. DHTMLX will also benefit web development companies in that it allows applications to be built with less manpower and training, helping cut financial costs.