|
|
|
|
|
|
|
|
|
JavaScript UI Library for Building Cross-Browser Web and Mobile Applications
What's included in JS UI library
Accordion
Easy-to-Use JavaScript Accordion
You can use dhtmlxAccordion as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser (IE, FF, Opera, Safari, Chrome)
Space-saving way to organize content
Auto-resizing capabilities
Common DHTMLX container functionality
Ability to open several panels independently (multi mode)
Easy detaching of objects
Destructor for better memory usage
Easy integration with other DHTMLX components
4 predefined skins
Undockable items
Space-saving way to organize content
dhtmlxAccordion allows you to organize your web content in a space-saving way. This JavaScript accordion widget displays multiple panels within a container. Just one of these panels is expanded at a time, while others are collapsed. To see the other panels' contents, the user clicks on the appropriate header, and the chosen panel will open smoothly. This popular visual element is built entirely in JavaScript and works correctly in all major web browsers (FF, IE, Opera, Safari, Chrome).
Easy-to-use and highly customizable control
The content displayed in the panels can include any object, URL, or other DHTMLX component, such as Tree, Grid, DataView, etc. dhtmlxAccordion is light-weight and easy to use and comes with 4 predefined skins including modern Material Design. It offers an efficient JavaScript solution for displaying diverse content within expandable panels.
Multi mode, drag-and-drop and more features
You can also use dhtmlxAccordion in a multi mode, when each panel is displayed independently and can be expanded/collapsed without affecting the others. The end user can also rearrange the panels with simple drag-and-drop actions.
Integration with other DHTMLX components
dhtmlxAccordion integrates easily with other components in the DHTMLX product line. It can be easily integrated into an app built with dhtmlxLayout. You can also put other DHTMLX components into the accordion panels with just a single script command. Any item in dhtmlxAccordion can be undocked - extracted from the single layout in order to be displayed separately (in a window of the dhtmlxWindows system).
Editions and Licenses
dhtmlxAccordion is available in Standard Edition only.
You can use dhtmlxAccordion for free under GNU General Public License v2, or Free License that allows you to use the component in a non-GPL application/website.
Open Source - GPL v2 - Allows you to use dhtmlxAccordion in open source, GPL-ed projects for free.
Free License - Allows you to use dhtmlxAccordion in non-GPL, proprietary projects (applications) at no charge.
Calendar
JavaScript DatePicker Component
You can use dhtmlxCalendar as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser support: Internet Explorer, FireFox, Opera, Safari, Chrome
Full control with JavaScript API
Simple configuration
The ability to set inactive dates
Configurable first day of the week
Easy connection to text input
Built-in multilingual support
"Today" button
Popup date picker for your app
dhtmlxCalendar is a lightweight cross-browser JavaScript calendar which can be configured as a popup date picker or a flat calendar. The component is easy-to-use and fully customizable. It can be attached to any text input field and provides fast and intuitive date selection in web- based apps.
Date range selection tool
dhtmlxCalendar features custom date format, the choice of any day as the first day of week, a year drop down list, and various skins and languages to choose from. The component can also be used as a date range selection tool, when dates prior to and after the available date range are disabled accordingly.
Complete JavaScript API
Like other DHTMLX components, dhtmlxCalendar provides a complete JavaScript API to give developers broad control over its state and behavior.
Carousel
Configurable JavaScript Carousel
You can use dhtmlxCarousel as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser (IE, FF, Opera, Safari, Chrome)
Space-saving way to organize content
Easy integration with other DHTMLX components
4 predefined skins
Full control with JavaScript API
Fully customizable
3 types of animation: slide, flip and cards
Integration with Google Maps
Displaying and sliding any type of content
dhtmlxCarousel is a JavaScript carousel component for displaying and sliding any type of content - images, text, charts, grid, etc.
Three types of animation
For now, dhtmlxCarousel can be used for controlling list of items in multiple directions in horizontal order using special arrow buttons in desktop apps and by sliding movements on touch devices. dhtmlxCarousel supports three types of animation: slide, flip and cards.
Integration with other DHTMLX components
The component can be integrated with any DHTMLX component: it can be attached to the components such as Accordion, Sidebar, Window, etc, or you can attach almost any DHTMLX component to Carousel.
Chart
JavaScript/HTML5 Charts Library
You can use dhtmlxChart as an individual component or as a part of dhtmlxSuite
Product Features
Chart types: line, spline, area, bar, pie, donut, scatter, and radar charts
Cross-browser support
Chart series and combinations of charts
Loaded from XML, JSON, JavaScript array, or CSV
Easy customization of chart appearance
Use with any server-side technology
Integration with other DHTMLX components
Charts types
Generate most common chart types
dhtmlxChart is a JavaScript charting library for generating cross-browser HTML5 charts. It supports the most common chart types: line, spline, area, bar, pie, donut, scatter, and radar charts. For complex charting needs, you can create a chart series, plotted separately side by side, or stacked. You can also display a combination of different charts types on a single chart (e.g. combine line and bar charts).
Easy customization
The charts can be loaded from XML, JSON, JavaScript array, or CSV and updated on the fly (by using Ajax) to show changing graphical data. You can easily customize the chart appearance by configuring any chart elements: colors, tooltips, scales, templates, labels, etc.
Cross-browser support
The dhtmlxChart library is written in JavaScript using Canvas and works in all major web browsers: IE, FF, Safari, Opera, Chrome, or any other browsers based on Mozilla or the Webkit engine. In the old versions of IE, dhtmlxChart uses VML (excanvas.js library). You can use dhtmlxChart with any server-side technology to represent your data in the most convenient and descriptive way.
Integration with other DHTMLX components
As part of DHTMLX toolkit, dhtmlxChart is compatible with other DHTMLX components. If you put dhtmlxChart within a cell in dhtmlxLayout, the chart will adjust its size to the size of the layout cell. You can also bind these HTML5 charts to dhtmlxGrid to display charts generated from the grid data.
ColorPicker
JavaScript ColorPicker component
You can use dhtmlxColorPicker as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser support: IE, FF, Opera, Safari, Chrome
Flexible JavaScript API
The ability to save custom colors
Familiar look and feel
Complete color palette
RGB/HSL
4 predefined skins
RGB, HSL, and hex formats
This JavaScript component allows you to implement a fast and intuitive color picker similar to the one used in graphical desktop applications. dhtmlxColorPicker handles RGB, HSL, and hex formats, and provides an easy solution for adding visual color selection to your web apps or sites.
Easy integration with other controls
The component displays a color selection box with a luminosity bar and text fields for entering RGB and HSL values. Users can define custom colors which will be saved and appear the next time the color picker is called. Our JavaScript ColorPicker can be integrated either as an inline control or a popup dialog box. You can also use it as a form element of dhtmlxForm.
Customizable appearance
The ColorPicker comes with 4 predefined skins (SkyBlue, Web, Terrace and Material). You can easily customize the component's look and feel with the rich script API.
Combo
JavaScript ComboBox with Autocomplete
dhtmlxCombo is a JavaScript/HTML5 autocomplete dropdown UI component. You can use dhtmlxCombo as an individual component or as a part of dhtmlxSuite UI library
Product Features
Full control with JavaScript API
Simple configuration
Editable/read-only modes
Filtering mode
Custom select list item types: checkbox, image
Templates for list items (custom items)
Integration with dhtmlxGrid and dhtmlxForm
Cross-browser autocomplete combobox
Autocomplete behavior
Sorting
Multiline items
Linked combo boxes
The ability to convert existing select boxes
Multicolumn combo
Loading options list from select box, XML, JavaScript, JSON
Extended select box functionality
dhtmlxCombo is a cross-browser JavaScript combobox with an autocomplete feature. It extends basic select box functionality and provides the ability to display suggestions while a user types in the text field. dhtmlxCombo can be converted from existing instances of HTML Select, or populated with JavaScript. With Ajax data loading, it can get the list of values dynamically from the server datasource.
Different variants of initialization
You can convert existing select boxes to combobox objects automatically by enabling automatic conversion, or manually with a script method. This dropdown box can also be initialized from XML, JavaScript, or JSON.
Four modes in dhtmlxCombo:
Editable select box - A user can either select a value from the list or type a custom value.
Read-only select box - A user can select just one value from the associated list of choices.
Filter - The whole list is loaded on the client side, and as a user begins to type, the list is updated with the appropriate values (which contain or begin from the characters typed).
Autocomplete - The list is loaded and shown as a user types in the input box.
Wide range of component control options
Like other DHTMLX components, dhtmlxCombo provides a complete JavaScript API to give developers a wide range of options to control the component state and behavior. To manage client-server data communication for dhtmlxCombo, we're offering a dhtmlxConnector extension that simplifies server-side integration (PHP, .NET, Java, ColdFusion).
Multicolumn Combo
This JavaScript autocomplete combobox has the ability to create a combo with multiple columns. The list of suggestions has no limits in amount of information that can be displayed in combo.
More features become available
It supports easy creation of linked combo boxes, sorting, custom text templates, and multiline items.
DataView
Easy-to-Use JavaScript DataView
You can use dhtmlxDataView as an individual component or as a part of dhtmlxSuite
Product Features
Select single items
Multiple selection
Group selection
Inline editing
Rich JavaScript API
Drag-and-drop within DataView
Drag-and-drop between DataView and dhtmlxGrid, dhtmlxTree, or any other HTML container
Smart rendering
Paging
Dynamic loading
Cross-browser support
Add/delete items: simple, complex, with any set of custom properties
3 predefined views
Get your data organized
dhtmlxDataView is a client-side JavaScript component that displays a collection of objects according to a user-defined template. It allows you to arrange multiple objects with similar properties within a single container and get your data organized.
Rich JavaScript API
If you're building an online store, or image gallery, or need to show a number of similar objects on a page, you can use dhtmlxDataView, which will greatly simplify this task. Due to the rich JavaScript API, you can control any visual aspect of object rendering and create an Ajax- enabled item browser with any design you want.
Smart rendering, paging, and dynamic loading support
There is no limit to the number of objects you can put into the DataView. Smart rendering, paging, and dynamic loading functionality allow you to display hundreds or thousands of objects without loss of performance. For easy of use, smart-rendering mode is enabled by default in the components and will effectively handle lots of items loaded into the DataView.
Server-side connectors and easy data loading
The component works with dhtmlxConnector (PHP, Java, ASP.NET, and Cold Fusion), which provides automatic saving and loading of data from the server-side database using Ajax. A variety of data sources can be used to load the content within a DataView elements: JSON, XML, JavaScript array, HTML, or CSV.
Cross-browser support
This JavaScript DataView component is a handy tool for building an Ajax-powered item viewer which will work equally well in all major web browsers (IE, FF, Opera, Chrome, and Safari).
Editor
JavaScript WYSIWYG Text Editor
You can use dhtmlxEditor as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser compatibility: IE, FF, Opera, Safari, Chrome
Javascript API
Easy to initialize
Easy to use
Loads content from string or URL
Lite mode available with basic editor functionality
Highly configurable WYSIWYG editor
With this JavaScript component, you can easily implement a rich text editor into a web page. dhtmlxEditor allows you to replace standard HTML textarea with highly configurable WYSIWYG editor, providing users with the possibility to format text content in a browser window. The component works smoothly in all main web browsers (IE, FF, Opera, Safari, Chrome).
Easy adding of custom elements
dhtmlxEditor is integrated with dhtmlxToolbar, and you can easily configure it by adding custom buttons and select boxes linked to the editor script API. The appearance of the editor's toolbar can also be customized due to a set of predefined skins.
Integration with other DHTMLX components
This JavaScript WYSIWYG rich text editor can be easily integrated with other components of the DHTMLX product line: Windows, Accordion, Tabbar, or Layout.
Form
JavaScript Form Component
dhtmlxForm is a JavaScript form component with lots of interactive form elements and controls. You can use dhtmlxForm as an individual component or as a part of dhtmlxSuite
Product Features
Input field, select box, radio button, checkbox, etc.
Built-in file upload control
Form validation
Complex forms with dependencies
Ability to save user input to the backend database
Full control with JavaScript API
Cross-browser support
Integration with other DHTMLX components
Fully customizable
XML, JSON support
Easy initialization
Form control with lots of features
dhtmlxForm is a JavaScript component that helps you quickly generate and process Ajax-based web forms with a standard set of elements: input field, select box, radio button, checkbox, etc. The form component provides built-in file upload control, form validation and the ability to save user input to the backend database.
JavaScript Form Validation
To validate data that is put to the form, you can enable form validation mode. Also, dhtmlxForm provides support for the Live Validation mode - a mode when validation is invoked just after an input goes out of focus.
Different ways of data loading
This html/js form supports different data sources and can be generated from a JSON object, XML, or HTML. The data in the form can be loaded automatically from the server and updated dynamically on the page.
The main advantages of using our Ajax form script:
It's an easy and convenient way to build and manage web-based dynamic forms.
It simplifies data-loading into the form and provides a ready-to-use mechanism for saving data on the server (through dhtmlxConnector).
It provides a simple way to perform JavaScript form validation.
Cross-browser support: IE, FF, Safari, Opera, and Chrome.
dhtmlxForm matches the skin design of other DHTMLX components, so it can be easily integrated into a DHTMLX-based interface.
Create your own custom controls
In addition to the standard form elements supported by dhtmlxForm, you can also create and use your own custom controls. The component provides a flexible JavaScript form elements on the fly, to process events, and to validate input data.
Complex forms with dependencies
To create complex forms with dependencies, dhtmlxForm is the tool you need. It can manage the activity of form elements, making some fields active or inactive according to the rules you define. Even complex form generation and processing is easy with dhtmlxForm.
Different form types
With our JavaScript/html form component and its easy customization, you can build javascript login forms, contact forms, submission forms and so on. You can also use our JavaScript form builder to create forms faster with untuitive drag-and-drop interface.
Grid
JavaScript DataGrid Component
dhtmlxGrid is a JavaScript table library with high performance and great variety of features. You can use dhtmlxGrid as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser compatible (IE, Chrome, FF, Opera, Safari)
Full control with JavaScript API
Simple JavaScript or XML configuration
Integration with HTML forms
Filtering, searching, grouping
Auto-calculated values in footer/header
In-line editing
Ready-to-use solutions for large data sets: paging, dynamic loading, Smart Rendering
Frozen columns (splitted grid)
Clipboard support
Server-side integration with dhtmlxConnector
Support for subgrids within grid
Resizable/movable columns
Move rows/columns with drag-and-drop
Drag-and-drop to/from dhtmlxTree PRO
Combobox, calendar, and more predefined eXcells
Fast Performance with Large Datasets
dhtmlxGrid is a full-featured JavaScript grid control that provides cutting-edge functionality, powerful data binding, and fast performance with large data sets. Rich and intuitive JavaScript API makes the grid highly customizable and easy-to-use. dhtmlxGrid can load data from different data sources: XML (custom format supported), JSON, CSV, JavaScript array, and HTML table.
Filtering, Searching, Grouping, Smart Rendering
With this js grid view component, you can easily create nice-looking, Ajax-enabled tables with rich in-cell editing, built-in filtering, searching, and grouping capabilities. Smart Rendering and paging support ensure fast loading speed even with huge datasets. Numerous event handlers allow you to add necessary interactivity to the grid.
Keyboard Navigation
To navigate javascript tables without a mouse pointer, you can make use of keyboard navigation in grid component. There are 3 predefined keymap commands available: native, MS Excel and MS Access. You can also change any command based on your needs.
Server-Side Integration
Being a 100% client-side JavaScript solution, dhtmlxGrid can be integrated with any server-side technology (PHP, Java, Ruby on Rails, ASP.NET, ColdFusion, and others). The dhtmlxConnector library and Ajax support provide the ability to save and update the grid data on the server automatically in real time without page reload.
Powerful Features for Spreadsheets
dhtmlxGrid supports the most powerful features necessary for Ajax-based spreadsheets, such as merged cells, split mode, the ability to move grid columns (with drag-and-drop or script methods) and copy data to a clipboard (in CSV format).
Various In-Cell Editors
This grid js component supports various in-cell editors, including date picker, combobox, and other. The extensible architecture allows you to use custom components as cell editors (on a per cell basis), which gives the ability to customize and greatly enrich the grid functionality.
Use JavaScript Datagrid with TypeScript
Since version 5.1, dhtmlxGrid supports TypeScript, so you can use type checking, and as a result you'll have a stable code. What is more, you'll get suggestions and code completion by moders IDEs.
Layout
JavaScript Layout Component
You can use dhtmlxLayout as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser (IE, FF, Safari, Opera, Chrome)
Single-command integration with DHTMLX components
Full screen/window modes
Resizable items
Collapsible items
Dock/undock the layout cell in a window
A wide set of predefined layout patterns
The ability to create custom patterns
Add header/footer
Predefined skins, inherited by included components
Rich script API
Integration with Google Maps
Easy Arrangement of UI Elements
dhtmlxLayout is a JavaScript component that provides a powerful and efficient way to build Ajax-enabled web interfaces with ease. This component allows you to programmatically define interface structure, including the layout of elements and their sizes. The end users can easily resize, collapse or expand these interface elements.
High level of integration with other DHTMLX components
dhtmlxLayout provides a high level of integration with other DHTMLX components such as Grid, Tree, Windows, Menu, and others. The components can be integrated both globally for the application and separately for each layout pane. All DHTMLX components have a slick and clean look which can perfectly match the design of any modern website or app.
All necessary functionality inside
Using dhtmlxLayout, you can build sophisticated web interfaces in a simple and convenient way. The component provides fast rendering and a wide set of helpful features.
Custom layout patterns
dhtmlxLayout provides the ability to easily detach an object from its pane and adjust its size dynamically to a parent container on the page. The component also allows you to easily create custom layout patterns and define the UI structure of your app. dhtmlxLayout works perfectly well in all main web browsers (IE, FF, Safari, Opera, Chrome).
List
JavaScript ListView Control
You can use dhtmlxList as an individual component or as a part of dhtmlxSuite
Product Features
Manipulations: editing, sorting, filtering.
Paging, custom paging.
Drag-and-drop: within List, as well as between List and dhtmlxGrid, dhtmlxTree, or any other HTML container.
Touch devices support.
Loading data from the server-side using dhtmlxConnector.
Selection: single, multiple selection, group selection.
Init with auto height, fixed height.
Browsers compatibility (IE, FF, Opera, Chrome, Safari, MS Edge).
Integration with other DHTMLX components.
Display a collection of objects in a list
dhtmlxList is a JavaScript mobile-friendly UI control for displaying a collection of objects in a list according to a user-defined template. The component provides simple interface and easy navigation throughout all data in it.
Include any custom HTML you need
Items in List may contain not only plain text, but any custom HTML that you need, including links, images, etc. As for the content loading, you may choose the suitable way of loading the data in a List: JSON, XML, JavaScript array, HTML, or CSV.
Menu
JavaScript Navigation Menu
You can use dhtmlxMenu as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser compatibility
Full controll with JavaScript API
Can be used as a dropdown or context menu
Multiple ways of loading data: Ajax, HTML, script object, and script API
Hotkeys support
Tooltips support
4 predefined skins available (SkyBlue, Web, Terrace, Material)
Dynamic loading
Attractive navigation menu for your application or website
dhtmlxMenu is a nice-looking JavaScript menu component that provides an excellent solution for web navigation. With this completely customizable and slick JavaScript UI widget, you can effortlessly integrate an attractive navigation menu into a web site or application.
Drop down menu or a context menu configurations
dhtmlxMenu is flexible, powerful, lightweight, and easy-to-use. It can be configured as a drop down menu or a context menu. You can freely define visual menu appearance and structure by simply changing its parameters. Menu items can be aligned either on the left or on the right side of the menu panel.
Powerful client-side API
Like other DHTMLX components, our JavaScript menu provides cross-browser compatibility, a powerful client-side API, and a wide range of customization options (through JavaScript or XML). Dynamic loading from XML offers the ability to change the navigation menu completely without reloading.
Integration with other components
This Ajax-enabled dynamic menu allows you to create fast-loading navigation systems in a matter of minutes. dhtmlxMenu provides easy ways to integrate with other components of the DHTMLX product line. It can easily be included in dhtmlxWindows, dhtmlxLayout, and dhtmlxAccordion. It can also be used as a context menu for dhtmlxGrid, TreeGrid, and dhtmlxTree.
Message
JavaScript Message Box
You can download dhtmlxMessage as a part of dhtmlxSuite only
Product Features
Very lightweight (about 4 KB gzipped)
Easy customizable
Three ready-to-use types: alert box, confirm box, notification box
Cross-browser: IE, FF, Chrome, Opera, Safari
Different predefined styles
Configurable position and display duration
JavaScript notification library
dhtmlxMessage is a lightweight JavaScript library for displaying popup messages and notifications. You can use it to show alert and confirmation boxes or notify the end users about application activity.
Easy customization for your needs
It is easy to customize the appearance and behaviour of dhtmlxMessage to fit your design needs. You can also configure the position of a message or notification box and control their display duration. Alert and confirm dialog boxes have a number of callbacks that you can use to define the further page behaviour depending on user actions.
Use Message as independent alert, confirm, or notification box
You can use the dhtmlxMessage library to display information about other DHTMLX components (for example, notify the users that the grid data has been edited since their last visit) or as an independent alert, confirm, or notification box. dhtmlxMessage is included in the dhtmlxSuite package but also can be used as an individual component.
Popup
JavaScript Popup Box
You can download dhtmlxPopup as a part of dhtmlxSuite only
Product Features
Cross-browser (IE, FF, Chrome, Opera, Safari)
Built-in list view
Native integration with Toolbar, Ribbon, Form
The ability to display custom HTML inside the popup
Auto-positioning
Four predefined skins
The ability to insert other DHTMLX components: Calendar, Form, Grid, Tabbar, and other
Attach dhtmlxPopup to any HTML object on a page
dhtmlxPopup is a simple JavaScript popup box that can be used to display a tooltip, a list, a form, or any other custom content in an unobtrusive popup. You can attach dhtmlxPopup to any HTML object on a page and define whether it will appear on mouse click or mouse hover.
Insert any custom HTML or other DHTMLX components
There are no any limitations on what you can place inside the popup window. You can insert any custom HTML (text, image, div container, etc) or other DHTMLX components, such as Accordion, Calendar, Form, Grid, Layout, Tabbar, or Tree. dhtmlxPopup comes with three predefined skins you can choose from.
Integration with other components
The Form, Toolbar, and Ribbon components support native integration with dhtmlxPopup. The popup can be easily attached to dhtmlxToolbar/dhtmlxRibbon button or any element (input field, button) of dhtmlxForm. dhtmlxPopup is included in the dhtmlxSuite package but also can be used as an individual UI component for displaying custom HTML content in an attractive popup box.
Ribbon
JavaScript Ribbon Toolbar
You can use dhtmlxRibbon as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser compatibility
The ability to group buttons into blocks, tabs
Various options for data loading (XML file or string, JSON object, JavaScript object)
The ability to create custom buttons
Full control with JavaScript API
Easily attached to Layout, Windows, etc.
Different button types: button, text, select button, listed option, two-state button, separator, slider, input, combo, checkbox, segmented button
Intuitive navigation panel with ribbon interface
dhtmlxRibbon is a JavaScript component that allows you to create a nice-looking ribbon interface similar to the one found in MS Office platform. With dhtmlxRibbon, you can quickly create tabbed toolbars with different button types organized in logical blocks and provide your users with an intuitive navigation panel.
Many available button types and custom elements
When creating a ribbon toolbar, you can choose from the list of available button types: button, two-state button, grouped buttons, text, input field, checkboxes, select, combo, slider, etc. Due to rich JavaScript API of dhtmlxRibbon, you can also create your custom button or input element.
Customizable appearance
The ribbon component works in all major web browsers (IE, FF, Safari, Opera, Chrome). As for the look of the ribbon, you can choose from 4 predefined skins or adjust the skin with the online Skin Builder. dhtmlxRibbon is really useful for creating a superior JavaScript-based ribbon toolbar.
Integration with other DHTMLX components
dhtmlxRibbon can be easily attached to any container component of the DHTMLX UI library (such as Windows, Layout, Accordion and Tabbar) with just a single script command. You can use dhtmlxRibbon as a separate control or get it within the dhtmlxSuite package with other UI widgets.
Sidebar
JavaScript Sidebar Navigation Menu
You can use dhtmlxSidebar as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser compatibility
Full control with JavaScript API
Custom templates
Easy initialization
Bubbles
Fully customizable
Single-cell mode
4 predefined skins including Material Design
XML, JSON support
Full-screen mode (the sidebar takes the entire browser window space)
Vertical navigation menu for your app
dhtmlxSidebar is a handy JavaScript vertical navigation menu. You can place any items into Sidebar and attach other DHTMLX components to it. By selecting an item in the Sidebar, you can view its content in the right part of the component.
Cross-browser control that can be integrated with other DHTMLX components
dhtmlxSidebar represents easily-customized vertical navigation menu. The component perfectly works in all major browsers (Chrome, FF, Safari, IE, Opera). The sidebar widget can be used both as a stand-alone component for building web and mobile apps, and can be integrated with other DHTMLX components in just one command.
5 predefined templates, 4 ready skins
There are 5 predefined templates (details, tiles, icons, icons_text, text) for displaying the elements of items, and you can also easily create your own custom template. The skin of dhtmlxSidebar can be chosen from 4 predefined skins or generated by means of our online Skin Builder.
Slider
JavaScript Slider Control
You can use dhtmlxSlider as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser (IE, FF, Chrome, Opera, Safari)
Full control with JavaScript API
Customizable behavior
Range mode
Integration with HTML forms
Horizontal and vertical layout
Customizable design
Different predefined skins including Material Design
High stability
Customizable vertical and horizontal slider
dhtmlxSlider is a JavaScript component that allows easy implementation of vertical and horizontal sliders on a web page. The component comes with a number of predefined skins. In addition, you can fully customize its appearance via JavaScript API. Simple but effective, this JavaScript slider is a neat way of creating nice-looking, cross-browser slider bars.
All necessary features included
dhtmlxSlider provides options to set min and max values, step value, and default value. In addition to setting value by clicking on the slider or dragging the slider's handle, the value can also be set by entering it into the input field.
Cross-browser JavaScript slider bar
dhtmlxSlider provides rich feature set and fast rendering. This JavaScript slider bar is compatible with all major web browsers and distributed for free.
Tabbar
JavaScript Tab Bar Component
You can use dhtmlxTabbar as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser (IE, FF, Chrome, Safari, Opera)
Full control with flexible JavaScript API
Loading content with Ajax or in iframes
Top or bottom oriented tabs
Close button for each tab
Scrollable
4 predefined skins
XML, JSON support
Auto show/hide left-right tabs arrows mode
Fully customizable
Easy initialization
Full-screen mode (the tabbar takes the entire browser window space)
Create dynamic tabbed-navigation interface
dhtmlxTabbar is a JavaScript tab bar control for creating a dynamic tabbed-navigation interface. With this component, you can add feature-rich, nice-looking tabs to your website or application in a matter of minutes.
Easy initialization
The tabs can be easily initialized on a web page, which makes building Ajax-based tabbed interfaces a breeze. Just assign any elements on your page (for example, divs) to the tabs of the dhtmlxTabbar, and it will automatically do all the work for you. The component will switch these elements, displaying them as the corresponding tab is clicked.
Rich JavaScript API
Tabs can be top or bottom oriented, and a close button can be added to each tab. dhtmlxTabbar comes with 3 predefined skins you can choose from. Cross-browser compatible and fully configurable with a rich JavaScript API, dhtmlxTabbar provides a simple but powerful building block for client-side navigation.
Single-command integration with other DHTMLX components
Together with other DHTMLX components, the tab bar module offers another ready-to-use element for building Ajax-driven web apps. dhtmlxTabbar supports a single-command integration with the DHTMLX components and provides a unified API for assigning objects to tabs or detaching them from tabs.
Toolbar
JavaScript Toolbar Control
You can use dhtmlxToolbar as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser compatibility
Full controll with JavaScript API
Various options for data loading (XML file or string, JavaScript object)
The ability to create custom buttons
The ability to attach toolbar into statusbar for paging
Different button types: button, text, select button, listed option, two-state button, separator, slider, input
Attractive horizontal toolbar within minutes
This free cross-browser JavaScript component enables you to create an attractive horizontal toolbar within minutes. dhtmlxToolbar is flexible, powerful, lightweight and easy to use.
Highly-customizable appearance
You can freely define the appearance of the toolbar by simply changing its parameters (color, font, borders, padding, position, background image, etc.). The component supports several button types (image, text button, two-state button, select box, slider, input box, and others). Toolbar buttons can be aligned either on the left or on the right side of the toolbar panel.
Fast performance, rich feature set, powerful JavaScript API
The toolbar works perfectly in all major web browsers (IE, FF, Safari, Opera, Chrome) and provides fast and seamless performance on a web page. With a great feature set, a wide variety of options, flexibility, and a powerful JavaScript API, dhtmlxToolbar is really useful for creating a superior toolbar for your web app or website.
Integration with other DHTMLX components
dhtmlxToolbar can be easily integrated with other components of the DHTMLX product line (such as Windows, Layout, Accordion, and Tabbar) with just a single script command. It can also be used with dhtmlxGrid as a paging bar.
Tree
JavaScript Tree Menu Component
You can use dhtmlxTree as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser compatibility (IE, Chrome, FF, Opera, Safari)
Loading from XML, JavaScript, JSON, CSV
Editable items (in-line editing)
Server-side integration with dhtmlxConnector
Keyboard navigation
Multi-selection
Context menu
Advanced drag-and-drop capabilities
Drag-and-drop to/from dhtmlxGrid
Right-to-left languages support (RTL)
Full controll with JavaScript API
Dynamic loading for large trees
Smart XML Parsing for large trees
Smart Rendering for extra-large trees
Serialization to XML
Checkboxes (two/three states, disabled/hidden), radio buttons
Customizable appearance
Unlimited user-data for nodes
Ajax-based hierarchical tree in your app
dhtmlxTree is a feature-rich JavaScript tree menu that allows you to quickly add a nice-looking, Ajax-based hierarchical tree on a web page. The treeview supports in-line node editing, advanced drag-and-drop, three-state checkboxes, and more.
Powerful drag-and-drop
Drag-and-drop capabilities allow you to drag the tree control items not just within one tree, but between different trees (even if they are located in different frames or iframes).
Complete API control
Rich client-side API provides complete control over the treeview appearance and behavior. In addition to the functional API, dhtmlxTree also provides an object constructor that allows you to define object properties within a single command.
Ajax model of data processing
This JavaScript treeview uses the Ajax model of data processing, so the tree content can be updated seamlessly without reloading the entire webpage. All changes performed in the treeview on the client side can be saved to the database automatically in real time.
Server-Side Integration
To simplify server-side integration, we've developed the dhtmlxConnector library that provides client-server data communication (available for PHP, Java, ASP.NET, and ColdFusion). You can also use dhtmlxTree with the custom server-side code.
Smart Rendering and Distributed Parsing
Once built into your web site or application, dhtmlxTree provides a high-performance navigation system. Smart Rendering brings excellent performance for trees with a great number of nodes per level. With Distributed Parsing, tree levels are loaded asynchronously: when the node is open, only the first portion of sub-nodes is displayed, then other nodes are dynamically processed and displayed by the same portions on demand.
TreeGrid
Editable JavaScript TreeGrid Component
You can use dhtmlxTreeGrid as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser compatibility: IE, FF, Safari, Opera, Chrome
Smart XML Parsing to increase performance
Dynamic loading of sub-levels
Drag-and-drop rows as child/sibling
Split mode support (frozen columns)
Vertical mathematical summation
Tree-specific script API
Tree-specific sorting, rows coloring, Smart Rendering
Paging support
Full control with JavaScript API
Simple JavaScript or XML configuration
Integration with HTML form
Easy styling with CSS or predefined skins
Serialization to XML/CSV
Clipboard support
Inline editing
Context menu
Server-side integration with dhtmlxConnector
Treeview and editable datagrid in one control
dhtmlxTreeGrid is a cross-browser JavaScript treegrid component designed to represent and edit hierarchical data in a grid view. It is based on dhtmlxGrid PRO and combines treeview and editable datagrid.
Customizable, flexible ajax-based treetables
A rich JavaScript API brings great flexibility to dhtmlxTreeGrid, allowing you to create completely customizable, Ajax-based treetables with expandable rows. Advanced data entry capabilities make the treegrid more interactive and let users enter and edit table data in an intuitive way.
Fast Performance with Large Data Sets
The ability to dynamically expand and collapse table rows assigned to the corresponding tree items makes this treegrid control a perfect solution for displaying treetables with an unlimited number of rows. To handle large amounts of data efficiently, dhtmlxTreeGrid also provides such features as Smart XML Parsing (renders grid rows dynamically on node opening), Smart Rendering (renders only rows in the visible area), and paging support.
Ajax Support and Server-Side Integration
Being written entirely in JavaScript, dhtmlxTreeGrid runs on the client side and allows the editing of the data on the fly. By using Ajax, the treegrid content can be updated without the page reload. To handle client-server communication and bind the grid data to the server database, you can use dhtmlxConnector (available for PHP, ASP.NET, Java, ColdFusion).
Feature Rich JavaScript TreeGrid
As an extension of dhtmlxGrid, the treegrid deploys all of its powerful functionality and offers a flexible and robust solution for adding a full-featured dynamic grid/treegrid into an Ajax-based web application. The component provides advanced drag-and-drop capabilities (both drop- between and drop-inside) and the ability to work in a split mode (frozen columns).
TreeView
JavaScript TreeView Component with Fast Rendering
You can use dhtmlxTreeView as an individual component or as a part of dhtmlxSuite
Product Features
Init from XML / JSON
Fast rendering of big datasets
Dynamic subloading
4 pretty skins including Material Design
Checkboxes
Ability to use custom icons
Font Awesome support
Drag-n-drop support
Ability to attach contextual menu
Multiple selection
Integration with other DHTMLX components
Integration with dhtmlxDataProcessor
Tree menu control with fast performance
dhtmlxTreeView is a JavaScript widget that provides you the ability to structure the data in a tree view. In comparison to dhtmlxTree component, a new tree is a lightweight control with significantly fast performance that allows you to load big datasets.
Basic but powerful functionality
Though TreeView control has only joined dhtmlxSuite library in the recent version 5.0, it possesses all high-demanded features: drag-n-drop, dynamic loading of items, checkboxes, multiple selection and so on.
Customizable appearance
dhtmlxTreeView has 4 predefined skins including Material Design. The component also supports Font Awesome iconic font. Using online Skin Builder, you can customize TreeView widget based on your needs.
Windows
JavaScript Windows Component
You can use dhtmlxWindows as an individual component or as a part of dhtmlxSuite
Product Features
Cross-browser (IE, FF, Chrome, Safari, Opera)
Full control with JavaScript API
Modal state support
Support for always-on-top feature
Built-in and custom buttons
Resizable
The ability to attach menu to windows icon or button
Easy integration with other DHTMLX components
Build cross-browser popup windows
dhtmlxWindows is a JavaScript UI component that enables you to build cross-browser popup windows. The component mimics the behavior of operating system dialogs and provides all common functionality available in a desktop environment: windows can be closed, minimized, maximized, resized, put on top, dragged, etc.
Easy adding/removing of content
The content within a window can be populated from an external link, or you can attach any object from a web page. With detaching capabilities, objects can be removed very easily from a window container. The dhtmlxWindows component also provides single-command integration methods for other DHTMLX components: Grid, TreeGrid, Tree, Accordion, Layout, Menu, etc.
Rich feature set and custom capabilities
With this JavaScript windows component, you can implement modal or non-modal dialogs, which can be grouped or displayed individually. Just like regular dialog boxes, dhtmlxWindows features various buttons which allow end-users to interact with windows. Custom buttons can also be added to the component.
4 predefined skins and customizable appearance
The component comes with 4 different skins. A rich JavaScript API allows you to control all window attributes and to customize each aspect of look and behavior of the dialog boxes.
Why To Choose DHTMLX Suite
Apps for All Browsers
The cross-browser user interface library allows you to build full-featured web UI for all major browsers: Microsoft Edge, Internet Explorer 8+, Firefox 0.9+, Safari 2.0+, Chrome, Opera 9.0+
Short Learning Curve
Due to a short learning curve, intuitive API and detailed tutorials, Suite UI library allows you to develop cross-browser, interactive web apps faster and with less effort.
No Deep OOP Structure
Our JavaScript library has simple, but very powerful API. The control is performed through the components themselves that greatly simplifies the work with UI library.
Cross-platform Web Apps
Build cross-platform web applications by the means of one HTML UI library. Open a cross-devices CRM demo application on different devices to learn how can it look like.
TypeScript Support
JavaScript UI library supports TypeScript and allows you to use type checking to write a more stable code. The typescript definitions are included in the Suite package.
Optimus JS Micro-framework
Develop your DHTMLX-based apps with dhxOptimus, extremely fast and lightweight js micro-framework. Easily customize these applications and quickly handle them due to high flexibility and simple code maintenance.
Fast UI Prototyping with Visual Designer
The Visual Designer tool offers a simple way to compose a JavaScript user interface with the DHTMLX UI library without writing a line of code.
Customizable UI Appearance with Skin Builder
Based on your design needs, you can adjust the look of your app by changing the skin type, font, and colors for the skins. For this, use our online Skin Builder.
Integration with IDEs
We offer DHTMLX autocompletion plugins for the major IDEs (Microsoft Visual Studio, PHPStorm, WebStorm, NetBeans, Aptana Studio, Eclipse, etc.). 
Server-Side Integration
As a client-side UI library, Suite can be used with any server-side technology. To simplify integration with the server side, we offer Connectors for PHP, ASP.NET, Java, and ColdFusion. DHTMLX can be also used with node.js to enable live updates in your app.
© Copyright 2000-2023 COGITO SOFTWARE CO.,LTD. All rights reserved
